Javascript 如何在嵌套表中追加当前行_Javascript_Html_Append

Javascript 如何在嵌套表中追加当前行

javascript html

Javascript 如何在嵌套表中追加当前行,javascript,html,append,Javascript,Html,Append,我想在button click上追加一行，该行位于嵌套表中。该表的结构如下： <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

我想在button click上追加一行，该行位于嵌套表中。该表的结构如下：

<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_表中添加第二行，如下所示：

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

//添加服务器按钮
$（“#添加服务器按钮”）。单击（功能（）{
$（'WTC服务器：目标服务器：'）。附加到（'add#Server_table'）；
});

但点击按钮后，追加操作不会发生

请让我知道问题。

可能是因为您最外层的表缺少一个结束标记。

您需要在函数中附加

添加服务器按钮的事件处理程序。
不要忘记为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>


$（文档）.ready（函数（）{
$（“#添加服务器按钮”）。单击（功能（）{
$（'WTC服务器：目标服务器：'）。附加到（'add#Server_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>   

”；
$（文档）。单击（“添加服务器”按钮），函数（）{
$（'WTC服务器：目标服务器：'）。附加到（'add#Server_table'）；
});
这很有效
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>

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


某物
世贸中心服务器：
目标服务器：
某物
添加行

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

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


函数myFunction（）{
var table=document.getElementById（“添加服务器表”）；
var行=table.insertRow（0）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
var cell4=行插入单元格（4）；
cell1.innerHTML=“新建cell1”；
cell2.innerHTML=“新建cell2”；
cell3.innerHTML=“新建cell3”；
cell4.innerHTML=“新建cell4”；
cell5.innerHTML=“新建cell5”；
返回false；
}
您是否尝试过console.log（“测试”）
在click事件中查看它是否实际启动？不，我没有尝试过。我尝试过，但它不起作用，我不知道为什么。检查警报是否起作用$（文档）。单击（“添加服务器按钮”，函数（）{alert（“hello”）；}）；它在这方面工作得非常好，您确定您包含了jQuery文件并按照@Iswanto San的建议包装在.ready（）
中吗？如果您只是猜测或对答案不太确定，请将其作为评论发布。抱歉，仅在此处遗漏了这一点。实际上是现在。@SidM我没有足够的声誉来评论别人的问题/答案。最低要求是50。这实际上存在于javascript页面中。我没有在这里添加整个页面。是否有任何错误？也许你可以使用firebug实现。如果我将javascript使用嵌入HTML文件本身而不是引用另一个js文件，这实际上是可行的，这不是为什么不可行的原因。你如何嵌入javascript文件？你能把密码贴出来吗？就像你说的那样。