How to append a row present inside a nested table

Question

I wanted to append a row on button click which is present inside a nested table. The structure of the table is as below:

<table cellpadding="5" cellspacing="5" width="100%"
style="height: 100%;" border="1" id="outer_box">
<tr style="height: 85px;">

</tr>
<tr>
    <td valign="top" align="center"  height="15%">
    <table cellspacing="0" cellpadding="0" border="0" width="100%"
        id="login_box" align="center">
        <!-- <table cellspacing="0" cellpadding="0" border="0" width="250" height="150"> -->
        <tr>
            Something
        </tr>
    </table>
    </td>
</tr>
<tr>
    <td align="middle" height="15%">
        <table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="add_server_table">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td align="middle"><input type="button" value="Add Server" id="add_server_button"/></td>
            </tr>
            <tr>
                <td align="right">WTC Server: </td>
                <td align="middle"><input type="text" name="start_date_tentative_0" /></td>
                <td align="right">Target Server: </td>
                <td align="middle"><input type="text" name="start_date_tentative_0" /></td> 
            </tr>
        </table>
    </td>
</tr>
<tr>
    Something
</tr></table>

In javascript am trying to append the second row in add_server_table as follows:

//Add Server button
$("#add_server_button").click(function () {
    $('<tr><td align="right">WTC Server: </td><td align="middle"><input type="text" name="start_date_tentative_0" /></td><td align="right">Target Server: </td><td align="middle"><input type="text" name="start_date_tentative_0" /></td></tr>').appendTo('#add_server_table');
});

But on button click the append is not happening.

Please let me know of the problem.

Answer 1

可能是因为您缺少最外面的表的</table>标记吗？

Answer 2

You need to attach the event handler for add_server_button in document.ready function. And don't forget to add reference for jquery file.

Try this:

<script src="jquery-1.10.2.js"></script>

<script>
   $(document).ready(function() {
     $("#add_server_button").click(function () {
       $('<tr><td align="right">WTC Server: </td><td align="middle"><input type="text" name="start_date_tentative_0" /></td><td align="right">Target Server: </td><td align="middle"><input type="text" name="start_date_tentative_0" /></td></tr>').appendTo('#add_server_table');
     });
   });
</script>

Answer 3

your code is working fine.just add event handler. try this:

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>';

<script>  

     $(document).click("#add_server_button",function () {
       $('<tr><td align="right">WTC Server: </td><td align="middle"><input type="text" name="start_date_tentative_0" /></td><td align="right">Target Server: </td><td align="middle"><input type="text" name="start_date_tentative_0" /></td></tr>').appendTo('#add_server_table');
     });

</script>   

Answer 4

This works

Html Code

 <table cellpadding="5" cellspacing="5" width="100%" style="height: 100%;" border="1"
            id="outer_box">
            <tr style="height: 85px;">
            </tr>
            <tr>
                <td valign="top" align="center" height="15%">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" id="login_box" align="center">
                        <!-- <table cellspacing="0" cellpadding="0" border="0" width="250" height="150"> -->
                        <tr>
                            Something
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="middle" height="15%">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="add_server_table">
                        <tr>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                            <td align="middle">
                                <input type="button" value="Add Server" id="add_server_button" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                WTC Server:
                            </td>
                            <td align="middle">
                                <input type="text" name="start_date_tentative_0" />
                            </td>
                            <td align="right">
                                Target Server:
                            </td>
                            <td align="middle">
                                <input type="text" name="start_date_tentative_0" />
                            </td>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
            <td>Something</td>

            </tr>
        </table>
        <button onclick="return myFunction()">Add Row</button>

JavaScript Code

<script type="text/javascript">

        function myFunction() {
            var table = document.getElementById("add_server_table");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell4 = row.insertCell(4);
            cell1.innerHTML = "NEW CELL1";
            cell2.innerHTML = "NEW CELL2";
            cell3.innerHTML = "NEW CELL3";
            cell4.innerHTML = "NEW CELL4";
            cell5.innerHTML = "NEW CELL5";
            return false;
        }

</script>