-1

我的 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 实现这个效果？

4

4 回答 4

2

你可以尝试这样的事情：

$('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);
    });
});

演示在这里：http: //jsfiddle.net/8RmS8/

于 2013-02-08T05:08:52.477 回答
1

看看这个：http: //jsfiddle.net/MMXnY/1/

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

你可以遍历每个tr然后make a clone of the last td and then put text and increase the number by parsing it then append it after last td.

于 2013-02-08T05:09:25.053 回答
0

http://api.jquery.com/append/

http://api.jquery.com/appendTo/

http://api.jquery.com/prepend/

每个函数都执行略有不同的附加。阅读它们并找出您要使用的内容。

例子：

前

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

脚本

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

后

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

希望这可以帮助！

于 2013-02-08T05:03:13.633 回答
0

如果要添加一列，可以迭代每个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的行为中添加一个（如果它不存在，某些浏览器会默认添加它）

例子：

<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>
于 2013-02-08T05:07:01.637 回答