Question

我有一个像这样的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);
    }
}

Answer 1

更新...

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>");

如果您需要修改标题中的编号，可以使用the function we worked on in your previous question。

原始答案......

$("#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>");

Answer 2

与您的问题无关，但您可以使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>");

jQuery添加HTML表列

2 个答案:

更新...

原始答案......