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

时间:2012-03-11 19:01:57

标签: javascript jquery

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实现这一目标?小提琴会有所帮助。

6 个答案:

答案 0 :(得分:15)

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

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

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

答案 1 :(得分:8)

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");   
});​

答案 2 :(得分:6)

使用.on('click',...);prependhttp://jsfiddle.net/k8hCa/

jQuery的:

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

答案 3 :(得分:1)

接受的答案是好的,但绝对值得注意的是tbody是你应该追加/添加的节点,并且使用appendTo和prependTo方法是最好的解决方案,因为当有任意数量的行时它将起作用,包括零。

请参阅此答案以获得一个好例子:https://stackoverflow.com/a/1353736/2812428

另请注意,最好自己指定一个tbody,即使没有行,也可以避免在没有添加任何行的情况下DOM中自动没有tbody的问题。

答案 4 :(得分:0)

Folloing就是我正在做的事情

<强>模板

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

答案 5 :(得分:0)

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

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