将行添加到表的开头 - JavaScript - jQuery答案

【问题标题】：Add row to the beginning of a table - JavaScript - jQuery将行添加到表的开头 - JavaScript - jQuery
【发布时间】：2012-03-11 19:01:57
【问题描述】：

在 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 完成此任务？小提琴会很有帮助。

【问题讨论】：

你试过$("mytable").html("<tr>...</tr>" + $("mytable").html())吗？
praveenbattula.blogspot.com/2010/01/…

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案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");   
});

【讨论】：

【解决方案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>');
});

【讨论】：

【解决方案4】：

公认的答案很好，但绝对值得注意的是 tbody 是您应该追加/前置的节点，并且使用 appendTo 和 prependTo 方法是最好的解决方案，因为它可以在有任意数量的行时工作，包括零。

请参阅此答案以获取一个很好的示例：https://stackoverflow.com/a/1353736/2812428

还要注意，最好自己指定一个 tbody，即使没有行，也可以避免在没有行添加到表的情况下，DOM 中不会自动出现 tbody 的问题。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我正在做的事

模板

<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);

【讨论】：

【解决方案7】：

这个问题真的很古老，但只是为了完整起见，如果你有标题，你可以很容易地修改 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>');
});

【讨论】：