Question

我想在按钮单击上添加一行，该行存在于嵌套表中。该表的结构如下：

<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>

在javascript中我试图在add_server_table中附加第二行，如下所示：

//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');
});

但是点击按钮后，附件没有发生。

请让我知道这个问题。

Answer 1

可能是因为您遗漏了最外层桌子的结束</table>标签？

Answer 2

您需要在document.ready函数中附加add_server_button的事件处理程序。并且不要忘记添加jquery文件的引用。

试试这个：

<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

你的代码工作正常。只需添加事件处理程序。试试这个：

 <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

这有效

Html代码

 <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代码

<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>

如何在嵌套表中附加一行

4 个答案: