javascript - javascriptinnerHTMLの印刷が間違っています

Question

<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に、そのdivに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コード

score 2 · Accepted Answer

残念ながら、あなたの HTML DOM 構造は無効です。あなたがやっているようにdivタグを中に入れることはできません。tbodyAにはタグtbodyのみを含めることができます。tr

タグに idNew_Userを指定すると、スクリプトが機能します。tbody

score 1 · Accepted Answer

これはあなたが望むものかもしれません.. 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>

これが役立つことを願っています！

score 1 · Accepted Answer

div を id の tr に置き換え、その中に innerHTML を貼り付けます。そうする前に、内側の html から tr タグを削除してください。

最初から tr に 3 つの空のセルを配置する必要がある場合があります。tr の高さを最初から 0 に設定することもできます。次に、tr に innerHTML を貼り付けた後、次のように高さを削除できます。

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

score 1 · Accepted Answer

内部に余分な 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);


        }

</p>

score 0 · Accepted Answer

私はいくつかの変更を加えました、あなたの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>

これは、最初の下部とユーザー追加ボタンの前に新しい行を追加しています。このフィドルを確認してください

javascript - javascriptinnerHTMLの印刷が間違っています

5 に答える 5

Related

Reference