CODEWITHSUNDEEP
javascriptinnerhtml
Abel Jojo
Abel Jojo

Reputation: 758

javascript innerHTML print misplaced

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

The above HTML have a div named New_User, I asked the below javascript to print ussing innerHTML to that div, but it prints out elsewhere. 

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

I just need to add those new row to the 'privilage' table. Any Consideration and help are welcome. Thanks in Advance.

Jsfiddle code

Upvotes: 1

Views: 447

Answers (5)

Eswar Rajesh Pinapala
Eswar Rajesh Pinapala

Reputation: 4911

You can actually add new rows to your table without an extra Div inside it. You can use JS in-house functions to achieve this. Also Please remove <div id="New_User"></div> from your tbody, This makes your DOM structure invalid.

Do this, Working demo : http://jsfiddle.net/epinapala/QPY6b/5/,

Add a new attribute id="tableID" to your table though!

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


        }

​

Upvotes: 1

Tom
Tom

Reputation: 4180

replace the div by a tr with an id and paste your innerHTML into that. Remove the tr tags from your inner html before doing so.

you may have to put 3 empty cells in your tr from the beginning; you can set the hight of your tr to 0, also from the beginning. Then after pasting your innerHTML in the tr you can remove the height as follows:

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

Upvotes: 1

hriziya
hriziya

Reputation: 1172

This is may be what you want.. 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>

and here the 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>";

}​

Hope this will help!

Upvotes: 1

zetlen
zetlen

Reputation: 3619

Your HTML DOM structure is invalid, unfortunately. You can't put a div tag inside a tbody like you're doing. A tbody can only contain tr tags.

Give the id New_User to your tbody tag and your script will work.

Upvotes: 2

Umesh Aawte
Umesh Aawte

Reputation: 4690

I made some changes like, Moved your div out of all tables,

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

This is adding new row at the bottom of first and before add user button. Please review this fiddle

Upvotes: 0

Related Questions