Динамическое добавление строк и ячеек таблиц с использованием Javascript - PullRequest
Новая
       42

Динамическое добавление строк и ячеек таблиц с использованием Javascript

0 голосов
/ 21 марта 2012

Я пытался добавить строку таблицы с данными в мою таблицу HTML, используя Javascript, но, похоже, я не могу ее добавить. Это почему? 

<html>
 <head>
  <title>
  </title>
   <script>
    function addUser(){
        var tbl = document.getElementById('datatable');
        var lastRow  = tbl.rows.length;

        var iteration = lastRow+1;
        var row = tbl.insertRow(lastRow);

        var cellLeft = row.insertCell(0);
        var textNode = document.createTextNode(iteration);
        cellLeft.appendChild(textNode);     
    }
   </script>
 </head>
  <body>
    <table border = 1 id = "datatable">
        <tr>
         <td>ID</td>
         <td>NAME</td>
         <td>ADDRESS</td>
        </tr>
        <tr>
         <td>1</td>
         <td>Something</td>
         <td>Something</td>
        </tr>
        <tr>
         <td>2</td>
         <td>Foo</td>
         <td>bar</td>
        </tr>
    </table>

    <form id = "myForm" onsubmit = "addUser()">
    ID:<input type = "text" name = "txtID"><br />
    NAME:<input type = "text" name = "txtName"><br />
    ADDRESS:<input type = "text" name = "txtAddress"><br />
    <input type = "submit" value = "Add Item">
    </form>
  </body>
</html>

Ответы [ 2 ]

2 голосов
/ 21 марта 2012

Вам не нужно отправлять форму, просто может помочь событие onclick. 

<input type = "button" value = "Add Item" onclick="addUser()">
1 голос
/ 21 марта 2012

Это потому, что вы отправляете форму.Сначала ваш AddUSer вызывается и работает, но страница перезагружается, и вы видите начальную страницу.

...