使用jQuery的动态html表

Smi*_*mit 0 html javascript jquery dynamic

如何 jQuery 在JS上做动态html表?例如,我必须有6个按钮:

  • 添加行到开始表;
  • 在中间添加行;
  • 添加行到结尾;
  • 删除第一行;
  • 删除中间行;
  • 删除最后一行;

UPD:

那是我的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);
        );
        });
Run Code Online (Sandbox Code Playgroud)

这是我的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>
Run Code Online (Sandbox Code Playgroud)

当我点击按钮时,没有任何反应.

Par*_*rma 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
Run Code Online (Sandbox Code Playgroud)

选择了可以执行的行后

var r = $(tr).eq(index)
Run Code Online (Sandbox Code Playgroud)

删除你可以做

r.remove()
Run Code Online (Sandbox Code Playgroud)

无论你在哪里排队