Блог

Главная - Вопросы по программированию - Не удается добавить данные в таблицу с помощью простого JS

Не удается добавить данные в таблицу с помощью простого JS

#javascript

#javascript

Вопрос:

  function addData() {

   var rows = "";
   var ID = document.getElementById("id").value;
   var Task = document.getElementById("task").value;
   rows  = "<tr><td>"   ID   "</td><td>"   Task   "</td></tr>";
   var tbody = document.querySelector("#table tbody");
   var tr = document.createElement("tr");

   tr.innerHTML = rows;
   tbody.appendChild(tr)
 }  
 <body>
  <form onsubmit="" method="POST">
    ID:
    <input type="text" id="id" required>New task:
    <br>
    <textarea id="task" required></textarea>
    <br>
    <input type="submit" value="Add" onclick="addData()">
  </form>

  <h3>Task Table</h3>
  <div id="excell">
    <table id="table" cellspacing="0px" cellpadding="25px" text-align="center">
      <thead>
        <tr>
          <td>ID</td>
          <td>Task</td>
        </tr>
      </thead>

      <tbody>

      </tbody>
    </table>
  </div>
</body>

Я изучаю Javascript и пытаюсь реализовать небольшую таблицу «Идентификатор и задача», но почему-то это работает только тогда, когда я ввожу только 1 тип данных, таких как только идентификатор или только задача, когда я ввожу 2 данные одновременно, ничего не происходит. Я был бы признателен, если бы вы сказали мне, в чем проблема и как я могу это исправить. Спасибо.

Вот мой HTML

     <body>
<form onsubmit="" method="POST">
    ID:
  <input type="text" id="id" required>

    New task:<br>
  <textarea id="task" required></textarea>
    <br>
<input type="submit" value="Add" onclick="addData()">
</form>

<h3>Task Table</h3>
<div id = "excell">
        <table id = "table" cellspacing = "0px" cellpadding = "25px" text-align = "center">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Task</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>
</body>

и вот мой JS

  function addData() {

            var rows = "";
            var ID = document.getElementById("id").value;
            var Task = document.getElementById("task").value;   
            rows  = "<tr><td>"   ID   "</td><td>"   Task   "</td></tr>";
            var tbody = document.querySelector("#table tbody");
            var tr = document.createElement("tr");

        tr.innerHTML = rows;
        tbody.appendChild(tr)
}

Комментарии:

1. он работает нормально. в вашем коде нет проблем

2. как вы могли бы добавить два данных одновременно, когда у вас есть только одна форма.

3. О, мне нужны разные формы для каждого данные? Я этого не знал, я немедленно добавлю еще один, спасибо.

4. я не знаю, о чем вы говорите.

5. нет необходимости создавать две формы

Ответ №1:

Реальная проблема с вашим кодом в том, что вы использовали кнопку отправки. Обычно при нажатии кнопки отправки данные передаются в свойство action тега form, что означает перенос страницы на следующую; если свойство action не задано, оно создает эффект мерцания и остается на текущей странице, а все компоненты становятся пустыми. То же самое происходит и в вашем коде. Лучше измените код

 <input type="Submit" value="Add" onClick="addData();"/>

в 

 <input type="BUTTON" value="Add" onClick="addData();"/>

и попробуйте, чтобы это сработало нормально.