0
テキストと入力を含む単純なテーブルがあります。私はドロップダウンから値を選択することによって、テーブル内の入力がいくつあるかを動的に判断しようとしています。これは初めてうまく動作しますが、値を変更しようとすると一部の行だけが削除されます。ここで私のコードですが、私はインプットをインデックスに置き換えて、何が起こっているのかをより簡単に見ています。ここで JavaScriptを使用してテーブルから行を削除するのに問題がある
は、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>
あなたが行動をデバッグするためのスニペットを使用してくださいことはできますか？ –
私はお詫びします、私はあなたの意味ではっきりしていません。より少ないコードを見たいと思っていますか、あるいは私が特定のテクニックを使用することを提案していますか？私はまだ非常に多くのことを学んでおり、あなたが何を意味するのかは分かりません。 – Protium
マークアップとコードの完全ではあるが最小限の例をここに指定する必要があります。 [mcve] – Rob