HTML - 如何以前置方式插入行？

Posted 2023-04-13

【中文标题】HTML - 如何以前置方式插入行？

【英文标题】：HTML - how to insert rows in a prepend manner?

【发布时间】：2014-03-19 11:21:32

【问题描述】：

我正在尝试在原始行下方添加一组新行，并与添加功能一起使用删除功能。幸运的是，我偶然发现了一篇 w3schools 的文章：http://www.w3schools.com/jsref/met_table_insertrow.asp

但是它会在原始单元格之上添加新单元格，我该如何调整它以使其正常工作？

代码：

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table><br>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<script>
function myCreateFunction()

var table = document.getElementById("myTable");
  
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerhtml = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
  

function myDeleteFunction()

document.getElementById("myTable").deleteRow(0);

</script>

【问题讨论】：

这里没有jQuery，你应该标记它吗？

不，我必须纠正你。你很遗憾地碰到了 w3schools 的一篇文章。 w3fools.com

【参考方案1】：

insertRow() 将新行的位置作为（可选）参数。因此，如果您希望新行位于表的末尾，请插入一个相应的索引，如下所示：

var row = table.insertRow( table.rows.length );

Example Fiddle

在您的代码中，您设置了0 的索引，根据定义，它是第一行。

【参考方案2】：

这里是 jQuery 解决方案......如果你想要的话。

HTML

<table border="1" id="myTable">
    <thead>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<br>
<input type="button" onclick="addRow()" value="Add row" />

JavaScript

var rowNo = 1;
function addRow()

    $('#myTable tbody').append('<tr><td>Row #'+ rowNo +'</td>'+
                               '<td>Row #'+ rowNo +'</td></tr>');
    rowNo++;    

Live Demo

【参考方案3】：

如果您使用 jQuery，则使用 .after() 和 :eq(int) 并删除您可以使用 .remove() 但如果您只想删除新添加的行，则可以使用 :gt(int) 方法：

$(function () 
   $('#create').on('click', function () 
      var table = $('#myTable')[0];
      var rows = table.rows.length;
      var row = '<tr><td>'+ rows +'</td><td>'+ rows +'</td></tr>';
      $('#myTable').find('tr:eq(2)').after(row);
   );
   $('#delete').on('click', function () 
      $('#myTable').find('tr:gt(2)').get(0).remove();
   );
);

---

使用上面的脚本，您必须为按钮提供特定的 ID #create 用于创建行，#delete 用于删除按钮，如下所示。

<button id='create'>Create row</button>
<button id='delete'>Delete row</button>

---

注意：

不显眼的 javascript 更好。应避免使用内联脚本。

Demo fiddle

---

更新：

我们可以缓存表中trs的长度，而不是:eq(2) and :gt(2)中的hardCode：

$(function () 
   var o = $('#myTable').find('tr:last').index(); // cache it here
   $('#create').on('click', function () 
      var table = $('#myTable')[0];
      var rows = table.rows.length;
      var row = '<tr><td>' + rows + '</td><td>' + rows + '</td></tr>';
      $('#myTable').find('tr:eq(' + o + ')').after(row); // place it here
   );
   $('#delete').on('click', function () 
      $('#myTable').find('tr:gt(' + o + ')').get(0).remove(); // and here
   );
);

Demo fiddle with cached trs

---

$('#myTable').find('tr:last').index(); 这一行获取了 dom 准备好的最后一个 tr 的索引，在本例中为 2，因为 .index() 是基于 0 的。

【参考方案4】：

var row = table.insertRow(0); // 0 represent the 0th index and hence it add at top

改成

var tdsLength = table.getElementsByTagName('tr').length;
var row = table.insertRow(tdsLength);  //change it to last index

或

var row = table.insertRow(-1);

从Docs 开始，如果索引为-1 或等于行数，则将该行作为最后一行追加。 JSFiddle

【讨论】：

先生，它工作得很好，只是等待几分钟来检查它作为正确答案，删除部分中的一个添加问题它仍然删除上面的而不是下面的，它是否遵循同样的逻辑？

@SOS 是的，我的朋友。 deleteRow 中的索引仍然是0，因此它会删除最顶层的元素，将其更改为-1 (fiddle)

【参考方案5】：

修改代码：

var row = table.insertRow(0);

到：

var row = table.insertRow(-1);

【参考方案6】：

也许使用 jQuery .prepend() 函数？在这里查看：http://api.jquery.com/prepend/