Question

我有一个包含文本和输入的简单表。我试图通过从下拉列表中选择一个值来动态确定表中有多少输入。这在第一次工作正常，但是当我尝试更改值时，只有部分行被删除。这是我的代码，我已经用索引替换了输入，以便更容易地看到发生了什么。

这是输出，页面加载

选择了6个元素后，它看起来仍然很好，显示表中的所有行

这是一切都出错的地方，虽然数组的长度输出为11只有8行输出到控制台，而一半旧行留在表中。

非常感谢任何帮助，我对这种行为感到十分困惑。编辑：我已经添加了HTML并删除了一些JS，老实说我不知道要排除什么，因为我不知道是什么问题..

根据要求，这里是一切，我不相信PHP是必需的，因为问题发生在表单发布之前。谢谢大家一起来看看。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <h1>Create Questions</h1>
        <form name="create" action="process.php" method="POST">

            <table id = "inputTable">
                <tr><td>ID: </td><td><input id="field" name="id" type="text" /></td></tr>
                <tr><td>Text: </td><td><input id="field" name="txt" type="text" /></td></tr>

                <tr><td>#of choices: </td><td><select id="numberOfChoices" name="numberOfChoices">

                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>

                    </select></td></tr>
                <tr><td>Answer: </td><td><input id="field" name="id" type="text" /></td></tr>
                <tr><td>Points: </td><td><input id="field" name="id" type="number" /></td></tr>
            </table>
            <button type="submit">Submit</button>
        </form>

        <script>

             window.onload = function () {

    document.querySelector("#numberOfChoices").addEventListener("change", addFields);

        };


        function addFields() {

            var letters = ["a", "b", "c", "d", "e", "f"];
            var choices = document.querySelector("#numberOfChoices");
            var choicesValue = choices.value;

            var tab = document.querySelector("#inputTable");

            var rows = tab.rows;
            console.log(rows.length);

            for (var j = 0; j < rows.length; j++) {

                var row = rows[j];

                console.log(row.cells[0].innerHTML);

                for (var k = 0; k < letters.length; k++) {
                    var letter = letters[k];


                    if (row.cells[0].innerHTML === letter)
                    {
                        tab.deleteRow(j);
                        break;
                    }

                }

            }


            for (var i = 0; i < choicesValue; i++) {

                var row = tab.insertRow(3 + i);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);


                cell1.innerHTML = letters[i];
                //cell2.innerHTML = "<input id=\"field\" name=\"id\" type=\"text\" />"
                cell2.innerHTML = i;

            }


        }

    </script>

</body>

Answer 1

删除某行时，表内容正在更改。所以删除＆＃34; a＆＃34;行导致将表格的长度减少1，下一行将是＆＃34; c＆＃34;而不是＆＃34; b＆＃34;。那＆＃34; b＆＃34;将保留在输出中。你会在新的＆＃34; a＆＃34;，＆＃34; b＆＃34;之后看到它。和＆＃34; c＆＃34;将被添加到表中。对于＆＃34; d＆＃34;同样如此。（因为删除＆＃34; c＆＃34;导致表格长度减少1）和＆＃34; f＆＃34; （因为删除＆＃34; e＆＃34;导致一个表长度减少一次）。

解决方案就是在删除行后减少迭代变量：

  for (var j = 0; j < rows.length; j++) {
      row = rows[j];
      console.log(row.cells[0].innerHTML);
      for (var k = 0; k < letters.length; k++) {
          var letter = letters[k];
          if (row.cells[0].innerHTML === letter)
          {
              tab.deleteRow(j);
              j--;
              break;
          }
      }
  }

我也为你准备了Plunker：https://plnkr.co/edit/L7ieHFLGob6ikL5YJsaD?p=preview

使用JavaScript从表中删除行时遇到问题

1 个答案: