Неуместная печать javascript innerHTML

На самом деле вы можете добавлять новые строки в свою таблицу без дополнительного 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);


        }

​

К сожалению, ваша структура HTML DOM недействительна. Вы не можете поместить тег div внутри тега tbody, как вы это делаете. tbody может содержать только tr тегов.

Дайте идентификатор New_User вашему тегу tbody, и ваш скрипт заработает.

Это может быть то, что вам нужно. 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>";

}​

Надеюсь, это поможет!

замените div на tr с идентификатором и вставьте в него свой innerHTML. Прежде чем сделать это, удалите теги tr из вашего внутреннего html.

возможно, вам придется с самого начала поместить 3 пустых ячейки в ваш tr; вы можете установить высоту вашего tr на 0, также с самого начала. Затем, вставив свой innerHTML в tr, вы можете удалить высоту следующим образом:

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

Я внес некоторые изменения, например, переместил ваш 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>

Это добавляет новую строку внизу первой и перед кнопкой добавления пользователя. Просмотрите эту скрипту.