jQuery에서 for 루프를 사용하여 테이블에 동적으로 행 추가

html 파일에서 jQuery 1.3.2를 사용하여 동적 테이블을 만들고 싶습니다. 이를 위해 첫 번째 행을 만든 다음 for 루프를 10 번 실행하고 각 반복에서 표의 마지막 행을 선택하고 after()을 사용하여 그 뒤에 새 행을 추가합니다. 이 새로운 행에는 for 루프의 카운터 값이 들어 있습니다.jQuery에서 for 루프를 사용하여 테이블에 동적으로 행 추가

코드 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Document</title> 
<script type="text/javascript" src="../jquery-1.3.2.js"></script> 
<script type="text/javascript"> 

    $("document").ready(function() { 
     for (var i = 0; i < 11; i += 1) { 
      var newItem = $("<tr><td>"i"</td></tr>"); 
      $("#table1 tr:last").after(newItem.html()); 
     } 
    }); 

</script> 

</head> 
<body> 
<table id="table1"> 
    <tr> 
    <td>row 1 col 1</td> 
    </tr> 
</table> 
</body> 
</html>

문제는, <table></table>에서 만들어진 첫 번째 행에 표시된다. 제발 도와주세요.

출처

2012-02-04 Akash

이 방법을 시도해보십시오

var newItem = "<tr><td>" + i + "</td></tr>"; 
$("#table1 tr:last").after(newItem);

출처

2012-02-04 06:21:31 dfsq

$("#table1 tr:last")

는 마지막 행을 선택합니다.

$("#table1")

에 비해 필요한 처리면에서 조금 더 비쌉니다. 전체 테이블 만 선택합니다. 마지막으로 무언가를 추가하려고 :

$("#table1 tr:last").after(...)

는 마지막 행을 선택한 후, 다시 한 단계를 가지고 있기 때문에, 다시 TR의 부모에 도착, 다시 비싸다.

왜 테이블 행을이 테이블의 자식으로 추가하려고하지 않습니까?

var row = $("<tr><td>"i"</td></tr>"); 
$("#table1").append(row);

append는 항상 table1의 하위 끝에 추가됩니다. 이것은 더 빨라야합니다. jQuery 문서에서 append을 살펴보십시오. 여기

출처

2012-02-04 06:36:36

thnks입니다 thts 바로 – Akash

for (var i = 0; i < 11; i += 1) { 
    $("#table1").append("<tr><td>" + i + "</td></tr>"); 
}

가 .... my code

출처

2012-02-04 07:05:30 InspiredJW

thnx ... 일했다 – Akash

jQuery에서 for 루프를 사용하여 테이블에 동적으로 행 추가

답변

관련 문제