루프를 사용하여 테이블에 행 추가

저는 항목 테이블을 만드는 프로젝트에서 작업하고 있습니다. 그것은 이렇게 보입니다 :루프를 사용하여 테이블에 행 추가

<table> 
    <tr> 
    <th>Priority</th> 
    <th>Item</th> 
    </tr> 
    <tr> 
    <td>1</td> 
    <td><input type="text"><br></td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td><input type="text"></td> 
    </tr> 
<tr> 
    <td>3</td> 
    <td><input type="text"></td> 
    </tr> 
<tr> 
    <td>4</td> 
    <td><input type="text"></td> 
    </tr> 
<tr> 
    <td>5</td> 
    <td><input type="text"></td> 
    </tr> 
</table> 
<script type = "text/javascript"> 
</script> 

</head> 
<body> 
</body> 
</html>

데이터를 입력 할 다음 번호와 공백이있는 다른 행을 추가하는 버튼이 필요합니다. 거기에 어쨌든 자바 스크립트를 사용하여 루프에 쓸 수 있습니까?

출처

2015-01-31 retrogirl19

가능한 중복 [JQuery와의 복제와 표 행을 복사하고 컨트롤을위한 새로운 고유 ID를 생성하는 방법 (http://stackoverflow.com/ 질문/3504499/copy-table-row-with-clone-in-jquery 및 create-new-unique-ids-for-the-con) –

방법에 대해 :의

<table id="specialtable"> 
 
    <tr> 
 
    <th>Priority</th> 
 
    <th>Item</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td><input type="text"><br></td> 
 
    <td><button onclick="addRow(this);">Add</button><br></td>  
 
    </tr> 
 
</table> 
 

 

 
<script type = "text/javascript"> 
 
function addRow(e) { 
 
    var current = e.parentNode.parentNode; // <tr>...</tr> 
 
    var tnew = current.cloneNode(true); 
 
    var rowCount = current.parentNode.getElementsByTagName("tr").length; 
 
    tnew.getElementsByTagName("td")[0].textContent = rowCount; 
 
    current.parentNode.appendChild(tnew); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

출처

2015-01-31 23:15:06

정말 고마워요 !! 이것은 완벽하게 작동했습니다! – retrogirl19

반갑습니다. –

루프를 사용하여 테이블에 행 추가

답변

관련 문제