动态增加行的js实现_jxls动态新增行-CSDN博客

本文介绍了两种在HTML中动态增加表格行的方法：利用insertRow和insertCell，以及使用createElement方法。通过具体代码示例，详细解释了如何实现并操作表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态增加表格的行，有两种方法，一种是利用insertRo和insertCell方法，再有就是利用document.createElement("tr"),document.createElement("td"),再用newTr.appendChild(newTd);下面给两个小例子

第一种方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:script type="text/javascript"></mce:script> </HEAD> <BODY> <TABLE id="tab1"> </TABLE> <a onclick="add()">tianjia</a> <form> <input type="button" onclick="addline()" value="增加一行"> <table border="1" id="test"> <tr> <td colspan="2"><input type="text" name="tt[]"></td> </tr> </table> <input type="submit"> </form> <mce:script type="text/javascript"></mce:script> </BODY> </HTML>

第地二种方法：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-js"> <title>The page of append rows to Table</title> <mce:script language="JavaScript"></mce:script> </head> <body style="margin:40px" mce_style="margin:40px" bgcolor="#FFFF00" onload="loadpage()"> <h2>Append Rows</h2><hr><br> <table id="inputTb" border="0" bordercolor="#4682B4" cellspacing="0" align="right"> <tr> <td> Rownum: <input type="text" name="rownum" id="rownum" size="2" maxlength="2"> </td> </tr> <tr> <td> <input type="button" value="Add" onclick="addRow()"> </td> </tr> <tr> <td> <input type="button" value="Delete" name="del" onclick="deleteRow()"> </td> </tr> </table> <table id="mainTb" border="1" bordercolor="#4682B4" cellspacing="0" > <tbody id="mainBody"> <tr id="rownumber0"> <td> <center> <input type="Checkbox" name="checkbox" onclick="checkBoxSel()"> </center> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> </tr> <tr id="rownumber1"> <td> <center><input type="Checkbox" name="checkbox" onclick="checkBoxSel()"></center> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> <td> <input type="text" name="newCarName" size="9"> </td> </tr> </tbody> </table> </body> </html>