在表格的开头添加行 - JavaScript - jQuery

Question

在jQuery中，将一行添加为表格的第一行的最佳方法是什么？

我有一个类似这样的表格：

<table id="mytable" cellpadding="0" cellspacing="0">
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
</table>
<button id="but">mybutton</button>

我想使用JavaScript和jQuery在表格开头添加一行作为第一行，并赋予默认值。该如何实现？提供一个fiddle会很有帮助。

- Alfred

---

你尝试过 $("mytable").html("<tr>...</tr>" + $("mytable").html()) 吗？ - slash197

http://praveenbattula.blogspot.com/2010/01/jquery-append-table-row-at-first-and.html - bPratik

Answer 1

你可以在 jQuery 中使用 .prepend 函数。

$('#mytable').prepend($('<tr>'));

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

- Andrei

Answer 2

http://jsfiddle.net/32Ymw/

$("#but").click(function(){
   row = $("<tr></tr>");
   col1 = $("<td>col1</td>");
   col2 = $("<td>col2</td>");
   col3 = $("<td>col3</td>");
   row.append(col1,col2,col3).prependTo("#mytable");   
});​

- Vigrond

Answer 3

使用.on('click',...);和prepend函数： http://jsfiddle.net/k8hCa/ jQuery:

$('#but').on('click', function(e){
    $('#mytable').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

- Alex

Answer 4

这个被接受的答案不错，但值得注意的是 tbody 是您应该附加/预先附加的节点，使用 appendTo 和 prependTo 方法是最好的解决方案，因为它将在任意数量的行（包括零行）时起作用。

请参阅此答案以获取一个很好的示例: https://dev59.com/pnM_5IYBdhLWcg3wfTS7#1353736

还要注意，即使没有行，指定 tbody 也是一个好习惯，以避免在表中未添加行的情况下自动在 DOM 中没有 tbody 的问题。

- Dan Hobbs

Answer 5

jQuery的 .prepend() 方法应该可以工作。

$('#mytable').prepend($('<tr>'));

- Brennan James

Answer 6

这个问题确实很古老，但为了完整起见，如果您有标题行，您可以轻松修改Alex的答案，在标题行之后插入主体行的顶部，如下所示...

<table id="mytable" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </tbody>
</table>

<button id="but">mybutton</button>

$('#but').on('click', function(e){
    $('#mytable > tbody').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

- spadelives

Answer 7

JavaScript 在表格顶部添加新行的方法非常简单：

const table = document.getElementById("myTable");

var row = myTable.insertRow(1);  // Give index as 1

var cell1= row.insertCell(0);
var cell2= row.insertCell(1);

cell1.innerHTML = "Contents in cell1";
cell2.innerHTML = "Contents in cell2";

将insertRow()方法的索引设置为1。

- Aditya Vishnu

Answer 8

以下是我正在做的事情：

模板

<script type="text/template" id="cardTemplate">
    <TR class=Normal>
        <TD>
                {0}
        </TD>
        <TD>
                {1}
        </TD>
        <TD>
                {2}
        </TD>

     </TR>
</script>

jQuery

       String.prototype.format = function() {
                                 var args = arguments;
                                 return this.replace(/{(\d+)}/g, function(match, number) { 
                                        return typeof args[number] != 'undefined'
                                               ? args[number]
                                               : match
                                              ;
                                          });
                                  };

                var cardTemplate = $("#cardTemplate").html();
                //Note: format is a custom method added for "String"
                var template = cardTemplate.format("a", "b","c");

                //$('#tblScanResult tbody > tr:first').before(template);
                $('#tblScanResult tbody').prepend(template);

- LCJ