通过Javascript添加多个表格

我想通过javascript在一次点击中添加一定数量的行。到目前为止，我可以设法添加一行，但有没有办法在一次点击中添加多行？我也可以添加colspan吗？通过Javascript添加多个表格

继承人我的代码：

<html> 
<head> 
<title>Example of Problem</title> 
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR"> 
     <meta content="C#" name="CODE_LANGUAGE"> 
     <meta content="JavaScript (ECMAScript)" name="vs_defaultClientScript"> 
     <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> 
<style type="text/css"> 

</style> 
<script type="text/javascript"> 
    function addrow(text) { 
     var row = document.createElement("tr"); 
     var row2 = document.createElement("tr"); 

     var td1 = document.createElement("td"); 
     var td2 = document.createElement("td"); 

     var td3 = document.createElement("td"); 
     var td4 = document.createElement("td"); 

     var input1 = document.createElement("input"); 
     var input2 = document.createElement("input"); 
     var input3 = document.createElement("input"); 
     var input4 = document.createElement("input"); 

     input1.className = "inputclass"; 
     input1.setAttribute("name", "input1"); 
     input1.setAttribute("id", "input1"); 
     input1.setAttribute("type", "text"); 
     td1.appendChild(input1); 
     row.appendChild(td1); 

     input2.className = "inputclass"; 
     input2.setAttribute("name", "input2"); 
     input2.setAttribute("id", "input2"); 
     input2.setAttribute("type", "text"); 
     input2.value = text; 
     td2.appendChild(input2); 
     row.appendChild(td2); 

     document.getElementById("ExampleTable").getElementsByTagName("tbody")[0].appendChild(row); 
    } 
</script> 

<table id="ExampleTable" style="WIDTH: 100%;" border="1"> 
<tr> 
     <td colspan="2" width="384"><font face="tahoma" size="2">Present/Last Employer</font></td> 
     <td colspan="2" width="384"><font face="tahoma" size="2">Address</font></td> 
     <td width="192"><font face="tahoma" size="2">Type of Business</font></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="384"><input type="text" name="txtPresentLastEmployer1" size="50%"></td> 
     <td colspan="2" width="384"><input type="text" name="txtPLEAddress1" size="50%"></td> 
     <td width="192"><input type="text" name="txtTypeofBusiness1"></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="384"><font face="tahoma" size="2">Job Title</font></td> 
     <td width="192"><font face="tahoma" size="2">Last Salary</font></td> 
     <td width="192"><font face="tahoma" size="2">Inclusive Dates</font></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="384"><input type="text" name="txtJobTitle1" size="50%"></td> 
     <td width="192"><input type="text" name="txtJTLastSalary1"></td> 
     <td width="192"><input type="text" name="txtJTInclusiveDates1"></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="384"><font face="tahoma" size="2">Name of Supervisor</font></td> 
     <td colspan="2" width="384"><font face="tahoma" size="2">Supervisor's Designation</font></td> 
    </tr> 
    <tr> 
     <td colspan="2" width="480"><input type="text" name="txtNameofSupervisor1" size="50%"></td> 
     <td colspan="2" width="480"><input type="text" name="txtSupervisorsDesignation1" size="50%"></td> 
    </tr> 
    </table> 

    <p> 
     <input id="Button1" type="button" value="AddRow" onclick="addrow('');" /> 
     </p> 
</body> 
</html>

帮助将欣然赞赏。提前致谢！

来源

2011-09-03 Loupi

Loupi，你的错误是在这里：

td2.appendChild(input2); 
row.appendChild(td2);

将其更改为：

td2.appendChild(input2); 
row2.appendChild(td2);

那么它应该工作。

复制粘贴问题：d

来源

2011-09-03 11:38:07

谢谢，我会马上尝试:) – Loupi

通过Javascript添加多个表格

回答

相关问题