13

テーブルがあり、実行時にセルのcolspan/プロパティを変更したい。rowspan次に例を示します。

<html>
    <head>
        <script type="text/javascript">
            function setColSpan() {
                document.getElementById('myTable').rows[0].cells[0].colSpan = 2
            }
        </script>
    </head>

    <body>
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <form>
            <input type="button" onclick="setColSpan()" value="Change colspan">
        </form>
    </body>

</html>

私の問題は、細胞がシフトすることです。問題のセルがまたがっているセルを削除する必要がありますか？

削除せずにできますか？

簡単なスプレッドシートを実装したいと思います。今のところ、長方形のセル範囲を選択して、[選択したセルをマージ]オプションのあるメニューを表示することができました。セルを「マージ解除」できるようにしたいので、他のセルを削除せずにセルをスパンするとよいでしょう。

4

2 に答える 2

25

セルを削除する必要があると思います。次のコードで確認してください。私がしたことは、行全体を削除し、新しい列スパンで新しい行を追加したことです

function setColSpan() {
    var table = document.getElementById('myTable');
    table.deleteRow(0);
    var row = table.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML= "cell 1"
    cell.colSpan = 2
}
于 2013-02-01T04:25:57.313 に答える
1

それがあなたがそれをするように言っているので、細胞はシフトします。次のようなテーブルを定義しています。

<tr>
    <td colspan="2">cell 1</td>
    <td>cell 2</td>
</tr>
<tr>
    <td>cell 3</td>
    <td>cell 4</td>
</tr>

だからあなたが見ているシフトは私が期待するものです。

セルを結合する場合は、結合されたすべてのセルの内容を取得し、それらを1つのセルに連結して、残りを削除する必要があります。些細な例では、次のようになります。

function setColSpan() {
    var myTable = document.getElementById('myTable');
    var cell2html = myTable.rows[0].cells[1].innerHTML;
    myTable.rows[0].deleteCell(1);
    myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html;
    myTable.rows[0].cells[0].colSpan = 2;
}

ただし、より堅牢なソリューションは...ちょっと複雑です。特に、マージを解除する機能が必要な場合。古いセル構造の情報をなんとかして保存する必要があります...おそらく、<span class="oldCell">cell 2</span>マージされたデータの周りに何かを置くことで？そして、マージを解除するときに「oldCell」スパンの存在を確認しますか？ただし、ユーザーが編集してその情報を保持する必要があります。そして、それが行と列をマージすることの意味を理解します。また、それが重複するマージにとって何を意味するのかを理解します。

于 2014-04-14T14:49:09.533 に答える