Question

我目前正在某种类型的小时跟踪器网站上工作，并且正在使用表格和表格。

现在，我可以在第一次提交时将表单内容添加到表中的地方使用它，但是我需要它允许您将新信息放入表单中，并且一旦提交，它将自动添加带有数据。

到目前为止，我具有此功能：

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：将i置于全球范围确实很有意义。我进行了一些测试，只是移动了一点，与之前没有什么不同，它只是将表单输入到第一个单元格中，然后再次单击提交时，它会添加一个空白行。第二个示例仅添加空白单元格。问题是我似乎无法在新单元格中添加新内容。为了更好地了解我在做什么，这里是我的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>

Answer 1

您试图增加变量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;
}

但是，这不会在新行中设置数据。为了使它正常工作，您必须摆脱所有单元格使用的id（我不知道您在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++;
}

如何遍历表格并将表格数据动态添加到表格？

1 个答案: