web-dev-qa-db-ja.com

jQueryはHTMLテーブル列を追加します

次のようなHTMLテーブルがあります。

<table border="1">
    <tbody>
        <tr>
            <td><a href="#" class="delete">DELETE ROW</a>COL 1</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

私が必要とするのは、他の列に基づいた多数のtdを持つ新しい列を追加する関数です。このHTMLテーブルでは、新しい列が追加される前にjQueryで列が削除されるため、関数は現在の列構成を取得し、行と列が常に削除または追加されるため、それに応じて適応する必要があります。

新しい列を追加するための次のコードがありますが、ヘッダーは追加されません。

function addACol() {
    var currentNumberOfTDsInARow = $('.tblModel tr:first td').length;
    newColNum = currentNumberOfTDsInARow;
    var rows = $('.tblModel tbody tr');
    for (var i = 0; i < rows.length; i++) {
        var lastTDClone = $(rows[i]).find('td:last').clone();
        $(rows[i]).find('td:last').after(lastTDClone);
    }
}
jqueryhtmlhtml-table
20
Manny Calavera

更新...

var c = $("#myTable tr:first td").length;
$("#myTable tr:first").append("<td><a href=''>Delete</a> Col "+(c+1)+"</td>");
$("#myTable tr:gt(0)").append("<td>Col</td>");

タイトルの番号を修正する必要がある場合は、 前の質問で取り組んだ機能 を使用できます。

元の回答...

$("#myTable tr").append("<td>New Column</td>");

または、ヘッダーも追加する場合は、前の行を0より大きいすべてのTRに制限できます。

$("#myTable tr:gt(0)").append("<td>New Column</td>");

そして、ヘッダーは最初のTRにのみあります。

$("#myTable tr:first").append("<td>Delete Column LINK</td>");
43
Sampson

質問とは関係ありませんが、HTMLをもう少しセマンティックにすることができます。

<table border="1">
    <thead>
        <tr>
            <th><a href="#" class="delete">DELETE ROW</a>COL 1</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 2</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 3</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 4</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 5</th>
            <th><a href="#" class="delete">DELETE COL</a>COL 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
            <td>ROW 1</td>
        </tr>
        <tr>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
            <td>ROW 2</td>
        </tr>
    </tbody>
</table>

変更されたjQueryコードは次のようになります。

var c = $("#myTable thead th").length;
$("#myTable thead tr").append("<th><a href=''>Delete</a> Col "+(c+1)+"</th>");
$("#myTable tr:gt(0)").append("<td>Col</td>");
10
SolutionYogi