jQuery 添加 HTML 表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1075415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery add HTML table column
提问by Manny Calavera
I have a HTML table like this:
我有一个这样的 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>
What I need is a function to add a new column with a number of td's based on other columns. The thing is that in this HTML table, columns are removed with jQuery before new columns are added so the function needs to get the current column config and adapt accordingly because the rows and columns are always being removed or added.
我需要的是一个函数来添加一个新列，其中包含基于其他列的多个 td。问题是在这个 HTML 表中，在添加新列之前使用 jQuery 删除列，因此该函数需要获取当前列配置并相应地进行调整，因为行和列总是被删除或添加。
I have this code for adding a new column but it doesn't add the header:
我有这个用于添加新列的代码，但它没有添加标题：
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);
}
}
回答by Sampson
Update...
更新...
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>");
If you need to fix the numbering in the titles, you can use the function we worked on in your previous question.
如果您需要修复标题中的编号，您可以使用我们在上一个问题中使用的功能。
Original Answer...
原答案...
$("#myTable tr").append("<td>New Column</td>");
Or, if you want to add a header too, you can limit the previous line to all TR greater than 0:
或者，如果您也想添加标题，您可以将前一行限制为所有大于 0 的 TR：
$("#myTable tr:gt(0)").append("<td>New Column</td>");
And the header would only be on the first TR:
标题只会出现在第一个 TR 上：
$("#myTable tr:first").append("<td>Delete Column LINK</td>");
回答by SolutionYogi
Not related to your question but you can make your HTML bit more semantic.
与您的问题无关，但您可以使您的 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>
Modified jQuery code may look like:
修改后的 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>");
