javascript innerHTML打印錯位

<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，但它打印出其他地方。javascript innerHTML打印錯位

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>"; 
}

我只需要將這些新行添加到'privilage'表中。任何考慮和幫助是受歡迎的。在此先感謝。

Jsfiddle code

來源

2012-06-24 Abel Jojo

實際上，您可以將新行添加到表格中，而無需在其中添加額外的Div。您可以使用JS內部函數來實現此目的。也請從您的tbody刪除<div id="New_User"></div>，這會使您的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); 


     }

來源

2012-06-24 05:26:05

謝謝。你的代碼很好用 –

謝謝你的幫助。 –

歡迎！........... –

我喜歡做一些改變，動了你的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>

這是在第一和前添加用戶按鈕的下方添加新行。請查看此fiddle

來源

2012-06-24 05:21:41

這也太好了。非常感謝 –

的歡迎，我也加了小提琴也 –

不幸的是，您的HTML DOM結構無效。你不能像你所做的那樣在tbody內放置div標籤。 A tbody只能包含tr標籤。

將標識New_User標記爲您的tbody標記，並且您的腳本將起作用。

來源

2012-06-24 05:21:45 zetlen

謝謝你的幫助 –

這可能是你想要的東西.. 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>";

}

希望這會有所幫助！

來源

2012-06-24 05:32:32 hriziya

請回答這裏的問題，有鏈接很好，但我不應該訪問，甚至不知道你在說什麼 –

好的。抱歉！我只是在這裏更新了我的答案:-) – hriziya

將id替換爲帶有id的tr，然後將innerHTML粘貼到該div中。在這之前從內部html中刪除tr標籤。

你可能不得不從一開始就在你的tr中放入3個空單元格;你也可以從一開始就把你的tr的高度設置爲0。然後在tr中粘貼innerHTML後，您可以刪除高度，如下所示：

document.getElementById("myTr").style.height = "";

來源

2012-06-24 05:46:46 Tom

javascript innerHTML打印錯位

回答

相關問題