Как перебрать таблицу и динамически добавить данные формы в таблицу? - PullRequest
0 голосов
/ 10 января 2019

В настоящее время я работаю над своего рода веб-сайтом для отслеживания часов и использую форму и таблицу.

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

Пока у меня есть эта функция:

function enterText() {
  var i = 1;
  var table = document.getElementById("myTable");
  var row = table.insertRow(i);

  if (document.getElementById("td1").innerHTML == "") {
    var x = document.getElementById("dt").value;
    document.getElementById("td1").innerHTML = x;
  } else {
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    i++;
  }

  var y = document.getElementById("hrs").value;
  document.getElementById("td2").innerHTML = y;
  var z = document.getElementById("dsc").value;
  document.getElementById("td3").innerHTML = z;
}

Таким образом, конечная цель - в конечном итоге также не использовать стол, но я использую его в качестве заполнителя.

редактировать * ответить на Freek Bes: Имеет смысл поставить меня как глобальный. Я немного его протестировал и просто перемещаюсь, я не вижу разницы, он просто вводит форму в первую ячейку, а затем, когда снова нажимают на submit, добавляет пустую строку. Второй пример просто добавляет пустые ячейки. Проблема в том, что я не могу заставить его добавлять новый контент в новые ячейки. Для лучшего контекста того, что я делаю, вот мой HTML:

<!DOCTYPE html>
<html>
<head>
<script src="hours.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<header>Hour Tracker</header>
<p>Created by: </p>
<body onload= enterText();>
<form onsubmit="return false" id="first" class="hours">
    Date:<br>
    <input type="date" name="date" id="dt"><br>
    Hours:<br>
    <input type="number" name="hours" id="hrs"><br>
    Description:<br>
    <input type="text" name="description" id="dsc"><br>
    <br>
    <input type="submit" value="submit" onclick="enterText();">
</form>
<table id="myTable">
    <tr>
        <th>Date</th>
        <th>Hours</th>
        <th>Description</th>
    </tr>
    <tr>
        <td id="td1"></td>
        <td id="td2"></td>
        <td id="td3"></td>
    </tr>
</table>
</body>
</html>

1 Ответ

0 голосов
/ 10 января 2019

Вы пытались увеличить переменную i, но i снова устанавливается в 1, когда вы запускаете функцию во второй раз. Вам нужно, чтобы переменная i была глобальной, определяя ее вне функции. Попробуйте это:

var i = 1;

function enterText() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(i);

  if (document.getElementById("td1").innerHTML == "") {
    var x = document.getElementById("dt").value;
    document.getElementById("td1").innerHTML = x;
  } else {
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    i++;
  }

  var y = document.getElementById("hrs").value;
  document.getElementById("td2").innerHTML = y;
  var z = document.getElementById("dsc").value;
  document.getElementById("td3").innerHTML = z;
}

Это, однако, не установит данные в новой строке. Чтобы это сработало, вам придется полностью избавиться от идентификаторов, которые вы используете для ячеек (я не знаю, что вы пытались сделать в операторе if, поэтому я тоже избавился от него для простота. Вы можете добавить его обратно, если хотите, и проверить результаты самостоятельно):

var i = 1;

function enterText() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(i);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = x;
  cell2.innerHTML = y;
  cell3.innerHTML = z;
  i++;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...