如何在javascript中动态添加行？

Question

有谁知道如何使“添加行”按钮起作用？ 我想做的是，如果我单击该按钮，则可以添加行并且数字会自动增加。 我试过了，但没用。 请帮忙。 谢谢你。

 function addRow() { var x = document.getElementById('Table'); var new_row = x.rows[1].cloneNode(true); var len = x.rows.length; new_row.cells[0].innerHTML = len; var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; inp1.id += len; inp1.value = ''; var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; inp2.id += len; inp2.value = ''; x.appendChild(new_row); }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <input type="button" value="Add Row" onclick="addRow()" /> <table id="Table" border="1" cellpadding="10" cellspacing="0"> <tr> <th>NO</th> <th>DESCRIPTION</th> <th>ACTION</th> </tr> <tr> <th>1</th> <th> </th> <th> </th> </tr> <tr> <th>2</th> <th> </th> <th> </th> </tr> <tr> <th>3</th> <th> </th> <th> </th> </tr> </table> </body> </html>

Answer 1

使用这样的东西来实现结果：

 function addRow() { var x = document.getElementById('Table'); var rows = document.querySelectorAll('Table tr').length; var new_row = '<tr><th>'+rows+'</th><th> </th><th> </th></tr>'; x.insertAdjacentHTML('beforeend',new_row); }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <input type="button" value="Add Row" onclick="addRow()"/> <table id="Table" border = "1" cellpadding="10" cellspacing="0"> <tr> <th>NO</th> <th>DESCRIPTION</th> <th>ACTION</th> </tr> <tr> <th>1</th> <th> </th> <th> </th> </tr> <tr> <th>2</th> <th> </th> <th> </th> </tr> <tr> <th>3</th> <th> </th> <th> </th> </tr> </table> </body> </html>