Question

js 怎么在 <tr>...</tr> 后动态添加 <tr>...</tr>

我想做的是 在 点击一个 <tr></tr> 后， 它的后面 添加一个 <tr> something</tr>

Answer 1

 function onAddTR(trIndex)
        {
            var tb = document.getElementById("tb1");
            var newTr = tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置
            var newTd1 = newTr.insertCell();
            newTd1.innerHTML = "这是新行，位置：" + trIndex;
            var newTd2 = newTr.insertCell();
            newTd2.innerHTML = "这是新行，位置：" + trIndex;
        }

请参考采纳，谢谢！

追问

这样理论上可以，但好像不灵活， 能用jquery 实现下么？

追答

Jquery实现，比用js简单多了：

  <table style="width: 100%;" id="tb1">
        <tr onclick="onAddTR(this)">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr onclick="onAddTR(this)">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
    <script type="text/javascript">
        function onAddTR(trObj)
        {
            $(trObj).after("<tr onclick='onAddTR(this)'><td>这是新行</td><td></td><tr/>");
        }
    </script>

Answer 2

var table = document.getElementById("tableId");
table.innerHTML = table.innerHTML + "<tr>......</tr>";

追问

您的做法相当于 在 前面追加， 如果是在 指定的 某个 后加呢？

追答

table.rows // table 中所有行的集合
table.tBodies // table 中 tbody 中的所有行的集合

利用这两个集合也可以做一些事情

另外 document.createElement("tr") 方法可以创建个空行出来，参数就是 tag 名