如何追加嵌套表中的行

How to append a row present inside a nested table

本文关键字：嵌套 何追加 追加      更新时间：2023-09-26

我想在一个嵌套的表中添加一行按钮单击。表的结构如下:

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

但是点击按钮后，没有发生追加。

请把问题告诉我。

需要在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>

可能是因为您缺少最外层表的关闭</table>标记?

您的代码运行良好。只需添加事件处理程序。试试这个:

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

可以了

 <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>
相关文章：