Добавить строку в начало таблицы - 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? Будет полезной скрипка.

Answer 1

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

Answer 2

Использование .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>'); 
}); 

Answer 3

Вы можете использовать .prepend функцию в JQuery.

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

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

Answer 4

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

Answer 5

Принятый ответ хорош, но определенно стоит отметить, что тём - это узел, к которому вы должны добавить/добавить, а использование методов appendTo и prependTo - лучшее решение, так как оно будет работать, когда будет любое количество строк , включая ноль.

Смотрите этот ответ на хороший пример: https://stackoverflow.com/a/1353736/2812428

Следует также отметить, что это хорошая практика, чтобы определить TBODY самостоятельно, даже если нет ни одной строки, чтобы избежать этой проблемы, не было бы никакого TBODY автоматически в DOM в том случае, если в таблицу не было добавлено строк.