使用jquery添加表记录

我的HTML结构如下：

<button type="button">Add Column Record</button>
<table border="1">
<tr>
    <th> Header 1</th>

    <td> L1</td>
    <td> L1</td>

</tr>
<tr>
<th> Header 2</th>

    <td> L2 </td>
    <td> L2 </td>

</tr>
<tr>
    <th> Header 3</th>

    <td> L3</td>
    <td> L3</td>

</tr>

我想在按下按钮后在最右边的列中添加一条垂直记录。我应该如何使用jQuery实现这种效果

每个函数的附加都略有不同。阅读它们，找出你想用的

例如：

$("#id_of_your_table > tbody > tr").each(function(index, trElement) {

    // Add a new TD at the end
    $(trElement).append($(document.createElement("td")));

});

以前

<div class="area"></div>

剧本

$('<p>Test</p>').appendTo('.area');

之后

---

希望这有帮助

如果要添加一列，可以在表的每个tr上迭代并添加一个新的td

例如：

$("#id_of_your_table > tbody > tr").each(function(index, trElement) {

    // Add a new TD at the end
    $(trElement).append($(document.createElement("td")));

});

注意：不要忘了在您的表中添加一个tbody，以获得良好的行为。如果它不存在，某些浏览器默认情况下会添加它

例如：

<table id="myTable">
    <tbody>
        <tr>
            .....

下面是一个完整的示例：

<button id="addColumn">Add new column</button>
<table id="myTable">
    <tbody>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
        </tr>
        <tr>
            <td> col 1</td>
            <td> col 2</td>
            <td> col 3</td>
        </tr>
    </tbody>
</table>

<script>

    // When DOM is ready
    $(document).ready(function() {

        // Listen on the click on the button
        $("#addColumn").on('click', function(mouseEvent) {

            // Iterate on all TR of the table
            $("#id_of_your_table > tbody > tr").each(function(index, trElement) {

                // Add a new TD at the end
                $(trElement).append($(document.createElement("td")));

            });
        });

    });

</script>

---

您可以尝试以下方法：

$('button').on('click', function() {
    var table = $('table');
    var newCell = null;

    table.find('tr').each(function(index) {
        newCell = $('<td/>');
        newCell.text('L' + (index+1));
        $(this).append(newCell);
    });
});

此处演示：

查看以下内容：

您可以迭代每个tr，然后克隆最后一个td，然后放入文本并通过解析它来增加数量，然后在最后一个td之后追加它

$('button').click(function(){
   $('table tr').each(function(i, v){
     $(this).append($('td:last',this).clone().text('L'+parseInt(i+1)));
   });
});