1 
<table class="privilage">
                <caption> These are the default users for institution </caption>
                <thead>
                    <tr>
                        <th>Users Name</th>
                        <th>User Id</th>
                        <th>Password</th>
                   </tr>
                </thead>
                <tbody>
                         <tr>
                            <td><input type="text" name='DefaultUser[]' value='' ><br></td>
                            <td><input type="text" name='DefaultUser_UserName[]' value=''></td>
                            <td><input type="password" name='DefaultUser_Password[]'></td>
                        </tr>


                <div id="New_User"></div>
                </tbody>
  </table> <table>
                    <tr>
                        <td><input type="button"   name="Add_New_User" value="Add new User" onclick="addRow()"></td>
                    </tr>
                </table>

上面的 HTML 有一个名为 New_User 的 div，我要求下面的 javascript 使用 innerHTML 打印到该 div，但它在其他地方打印出来。

 function addRow()
 {
var d= document.getElementById("New_User");
d.innerHTML+="<tr><th><input type='text' name='DefaultUsers' value=''/> Manager<br></th><th><input type='text' name='UserName' value=''/></th><th><input type='password' name='Password'/></th></tr>";
}​

我只需要将这些新行添加到“特权”表中。欢迎任何考虑和帮助。提前致谢。

Jsfiddle 代码

4

5 回答 5

2

不幸的是，您的 HTML DOM 结构无效。你不能像你正在做div的那样把标签放在里面。tbodyAtbody只能包含tr标签。

将 idNew_User提供给您的tbody标签，您的脚本将起作用。

于 2012-06-24T05:21:45.607 回答
1

实际上，您可以在表中添加新行，而无需在其中添加额外的 Div。您可以使用 JS 内部函数来实现这一点。另外请<div id="New_User"></div>从您的tbody中删除，这会使您的 DOM 结构无效。

这样做，工作演示：http: //jsfiddle.net/epinapala/QPY6b/5/，

不过，将新属性 id="tableID" 添加到您的表中！

function addRow() {
            var tableID = "tableID";
            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell2.appendChild(element2);

            var cell3 = row.insertCell(2);
            var element3 = document.createElement("input");
            element3.type = "text";
            cell3.appendChild(element3);


        }

​</p>

于 2012-06-24T05:26:05.227 回答
1

这可能是你想要的.. http://jsfiddle.net/ztnMk/

<table class="privilage">
                <caption> These are the default users for institution </caption>
                <thead>
                    <tr>
                        <th>Users Name</th>
                        <th>User Id</th>
                        <th>Password</th>
                   </tr>
                </thead>
                <tbody id="New_User">
                        <tr>
                            <td><input type="text" name='DefaultUser[]' value='' ><br></td>
                            <td><input type="text" name='DefaultUser_UserName[]' value=''></td>
                            <td><input type="password" name='DefaultUser_Password[]'></td>
                        </tr>
<!-- YOUR NEW TR GOES HERE... -->

                </tbody>

这里是JS：

function addRow(){
var d= document.getElementById("New_User");
d.innerHTML+="<tr><th><input type='text' name='DefaultUsers' value='Manager'/> </th><th><input type='text' name='UserName' value=''/></th><th><input type='password' name='Password'/></th></tr>";

}​</p>

希望这会有所帮助！

于 2012-06-24T05:32:32.333 回答
1

用带有 id 的 tr 替换 div 并将您的 innerHTML 粘贴到其中。在这样做之前，请从您的内部 html 中删除 tr 标签。

您可能必须从一开始就在 tr 中放置 3 个空单元格；您也可以从一开始就将 tr 的高度设置为 0。然后在 tr 中粘贴您的 innerHTML 后，您可以删除高度，如下所示：

document.getElementById("myTr").style.height = "";
于 2012-06-24T05:46:46.707 回答
0

我做了一些更改，例如，将您的 div 从所有表格中移出，

<table class="privilage">
   <caption> These are the default users for institution </caption>
   <thead>
       <tr>
          <th>Users Name</th>
          <th>User Id</th>
          <th>Password</th>
       </tr>
   </thead>
   <tbody>
       <tr>
          <td><input type="text" name='DefaultUser[]' value='' ><br></td>
          <td><input type="text" name='DefaultUser_UserName[]' value=''></td>
          <td><input type="password" name='DefaultUser_Password[]'></td>
       </tr>
    </tbody>
</table> 
<div id="New_User"></div> 
<table>
  <tr>
     <td><input type="button"   name="Add_New_User" value="Add new User" onclick="addRow()"></td>
  </tr>
</table>

这是在第一个底部和添加用户按钮之前添加新行。请检查这个小提琴

于 2012-06-24T05:21:41.570 回答