Adding multiple table row via Javascript_问答_开发者

Adding multiple table row via Javascript

开发者 https://www.devze.com 2023-04-02 19:59 出处：网络

I\'m trying to add a certain number of row in one click via javascript. So far I could manage to add one row but is there a way to add multiple row in one click? Also can I add colspan to it?

相关专题：javascript

I'm trying to add a certain number of row in one click via javascript. So far I could manage to add one row but is there a way to add multiple row in one click? Also can I add colspan to it?

Heres my code:

<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开发者_如何学JAVA"><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>

Help would be gladly appreciated. Thanks in advance!

Loupi, your mistake is here:

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

change it to:

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

then it should work.

copy paste issue :D

Adding multiple table row via Javascript

精彩评论

关注公众号

热门标签

图文推荐

Adding multiple table row via Javascript

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：