我正在尝试开发一个非常简单直接的网站。我有一张桌子，用户可以在input="text"字段中填写信息。我用加号按钮添加行来触发insertRow()函数，并用removeRow()函数动态删除行。擦除按钮可删除input="text"字段中的所有文本。当我单击继续按钮时，将触发函数proceed()，该函数将在下面的新表中重建上表。重建之后，我从字段中添加了文本，然后运行removeButtons()函数以删除表右侧的所有按钮。
问题是我在removeButtons()函数中运行proceed()，但是removeButtons()没有执行。即使我花了很多时间试图解决问题，我似乎也找不到错在哪里，这就是为什么我要向经验比我多得多的人寻求帮助。我知道问题可能出在proceed()函数中，但是我尝试了几种方法都无法解决问题。
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btndiv{
position: relative;
top: -20px;
}
.btn{
position: absolute;
right: -30px;
width: 20px;
height: 20px;
background-image: url(minus.jpg);
cursor: pointer;
}
.btnPlus{
position: absolute;
right: -60px;
width: 20px;
height: 20px;
background-image: url(plus.jpg);
cursor: pointer;
}
.hideP{
display: none;
}
table, td, th {
border: 1px solid #ddd;
}
table {
border-collapse: collapse;
}
</style>
<script>
function insertRow() {
//>>> Inserting a row and a div that holds the buttons on every last cell in each row
var table = document.getElementById("myTable");
var count = document.getElementById("myTable").rows.length;
var row = table.insertRow(count);
var cell = 0;
while (cell <= 6) {
var cl = row.insertCell(cell);
cl.innerHTML = "<input type='text' />";
if (cell == 6) {
cl.innerHTML = "<input type='text' /><div class='btndiv'><div class='btn' onclick='deleteRow(this.id)'></div><div class='btnPlus' name='plus' onclick='insertRow()'></div></div>";
}
cell++;
}
hidePlus();
resetIds();
}
function deleteRow(theId) {
//>>> Deleting a row
var count = document.getElementById("myTable").rows.length;
if (count == 3) {
alert("The table must have at least one row!");
} else {
theId++;
theId++;
document.getElementById("myTable").deleteRow(theId);
hidePlusDelete();
resetIds();
}
}
function resetIds() {
//>>> Resetting the ids of my buttons dynamically (when inserting or removing row)
var count = document.getElementById("myTable").rows.length;
var x = document.getElementsByClassName("btn");
var y = 0;
var temp;
while (y <= count) {
temp = x[y];
temp.setAttribute("id", y);
y++;
}
}
function hidePlus() {
//>>> Hiding all plus buttons in every row except the last one on the right side of the minus button
var count = document.getElementById("myTable").rows.length;
if (count > 3) {
var x = document.getElementsByClassName("btnPlus");
var xlength = x.length;
var xlengthnew = xlength - 1;
var y = 0;
var temp;
while (y < xlengthnew) {
temp = x[y];
temp.setAttribute("class", "hideP");
y++;
}
}
}
function hidePlusDelete() {
var count = document.getElementById("myTable").rows.length;
if (count >= 3) {
var x = document.getElementsByClassName("hideP");
var xlength = x.length;
var xlengthnew = xlength - 1;
var y = 0;
var temp;
if (y === xlengthnew && count < 3) {
temp = x[y];
temp.setAttribute("class", "btnPlus");
}
}
}
function clearTable() {
//>>> Clear all input="text" fields
var inp = document.getElementsByTagName('input');
for (var i in inp) {
if (inp[i].type == "text") {
inp[i].value = "";
}
}
}
function proceed() {
//>>> Get text from text boxes and store them in the text variable
//>>> Counter variable to get the number of input="text" fields
var text = "";
var count = 0;
var inp = document.getElementsByTagName("input");
for (var i in inp) {
if (inp[i].type == "text") {
text += inp[i].value;
text += ";";
count++;
}
}
//>>> Store the HTML code from myTable in data variable
//>>> Put the HTML code in newTable
var data = document.getElementById("myTable").innerHTML;
document.getElementById("newTable").innerHTML = data;
//>>> Splitting my text in parts
//>>> Put the text in the input="text" of newTable
var temp = 0;
var counter = 0;
var tempor;
var temporary;
var values = text.split(";");
var p2inp = document.getElementsByTagName("input");
for (var c in p2inp) {
if (p2inp[c].type == "text") {
temp = counter + count + 2;
tempor = p2inp[temp];
temporary = values[counter]
tempor.value = temporary;
//inp[temp].setAttribute("readonly", "readonly");
//inp[temp].setAttribute("disabled", "disabled");
counter++;
}
}
//>>> Hiding buttons from the tables
//>>> The buttons are divs modified to look like buttons with css
removeButtons();
}
function removeButtons() {
//>>> Adding the css class hideP (display="none")
alert("in remove buttons");
var divcount = document.getElementsByClassName("btndiv").length;
alert(divcount);
var divcounter = 0;
var divtemp = 0;
var divinp = document.getElementsByClassName("btndiv");
while (divcounter <= divcount) {
divtemp = divinp[divcounter];
divtemp.setAttribute("class", "hideP");
divcounter++;
}
}
window.onload = insertRow;
</script>
</head>
<body>
<table id="myTable" style="width: 50%">
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<th colspan="1" rowspan="2">Name, strength and form of medicine</th>
<th colspan="1" rowspan="2">What it's for</th>
<th colspan="4" scope="colgroup">How much to take, when</th>
<th colspan="1" rowspan="2">Extra instructions</th>
</tr>
<tr>
<th scope="col">Breakfast</th>
<th scope="col">Midday meal</th>
<th scope="col">Evening meal</th>
<th scope="col">Bed Time</th>
</tr>
</table>
<br/>
<input type="image" src="whipe.png" onclick="clearTable()" width="50px" height="50px"/>
<input type="image" src="go.png" onclick="proceed()" width="50px" height="50px"/>
<br/>
<br/>
<br/>
<table id="newTable" style="width: 50%"></table>
</body>
</html>
答案 0 :(得分：0)
您的问题（也许）是这个循环，如果您将其注释掉，则所需的功能将运行，因此，请从此处或从循环中使用的变量开始搜索错误：
for (var c in p2inp) {
if (p2inp[c].type == "text") {
temp = counter + count + 2;
tempor = p2inp[temp];
temporary = values[counter]
tempor.value = temporary;
//inp[temp].setAttribute("readonly", "readonly");
//inp[temp].setAttribute("disabled", "disabled");
counter++;
}
}
正如其他人所说，请始终在控制台中检查错误。 另外，我建议尝试开始调试您的JavaScript。