0

如何用jQuery 在 JS 上做动态 html 表格？例如，我必须有 6 个按钮：

  • 添加行开始表格；
  • 将行添加到中间；
  • 将行添加到末尾；
  • 删除第一行；
  • 删除中间行；
  • 删除最后一行；

升级版：

那是我的 JS：

$(document).ready(function(){
        $('#addFirstPosition').click(function(){
            var $tr = $('<tr><td>3</td><td>3</td></tr>');
            //var $myTable = $('#myTable');
            //$myTable.append($tr);
            $("#myTable > tbody").append($tr);
        );
        });

这是我的html：

<input id="addFirstPosition" type="button" value="AddFirst" />
<input id="addMiddlePosition" type="button" value="AddMiddle" />
<input id="addLastPosition" type="button" value="AddLast" />
<br />
<input id="deleteFirstPosition" type="button" value="DelFirst" />
<input id="deleteMiddlePosition" type="button" value="DelMiddle" />
<input id="deleteLastPosition" type="button" value="DelLast" />
<br />
<br />
<table id="myTable" border="1px">
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                1
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                2
            </td>
        </tr>
    </tbody>
</table>

当我单击按钮时，没有任何反应。

4

2 回答 2

6

按照你问这个问题的格式，通过 $(tr); 搜索行。然后使用

.append(); for adding to the last
.prepend(); for adding to the first
select an elemnt by doint $(tr).eq(index).after() to add in between

在你选择了你可以做的行之后

var r = $(tr).eq(index)

删除你可以做

r.remove()

无论您的行在哪里

于 2012-05-18T09:28:37.743 回答
2

您的 js 代码中有错误：

$(document).ready(function() {
    $('#addFirstPosition').click(function() {
        var $tr = $('<tr><td>3</td><td>3</td></tr>');;
        $("#myTable > tbody").append($tr);
    });// I WAS MISSING A } BEFORE );
});​

括号丢失或位置错误。上面的代码已更正，我对错误进行了评论。

演示在这里

但是Parv Sharma在他/她的回答中有一些优点。

于 2012-05-19T12:52:01.180 回答