테이블 시작 부분에 행 추가 - 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를 사용하여 이것을 어떻게 수행 할 수 있습니까? 바이올린이 도움이 될 것입니다. .on('click',...); 및 prepend를 사용

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

: 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

당신은 jQuery를에 기능을 .prepend 사용할 수 있습니다.

$('#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

허용되는 대답은 좋지만 tbody가 추가/추가해야하는 노드임을 분명히 지적하면 appendTo 및 prependTo 메서드를 사용하는 것이 행 수가 많을 때 작동하는 최상의 솔루션입니다. 0을 포함하여

좋은 예를 들어이 답변을 참조 : 행이없는 경우에도 그것이 TBODY를 직접 지정하는 것이 좋습니다는 것이 https://stackoverflow.com/a/1353736/2812428

참고,이 문제를 방지하기 위해 자동으로 더 TBODY이 없을 것 DOM 테이블에 추가 된 행이없는 경우.