在这里,我已经为相应的表插入了添加/编辑/删除/保存功能的HTML和JavaScript代码,如代码段所示。
当我倾向于移动表格下方的</TBL>
按钮时,我在JavaScript代码上遇到了一些错误。此外,我还在Save
和Save
功能中插入了单选按钮。
我无法在修改后运行Edit
和Save
函数,我将非常感谢您解决此问题的指导。
Edit
&#13;
function edit_row(no)
{
var editBtn = document.getElementById("edit_button" + no);
var saveBtn = document.getElementById("save_button" + no);
editBtn ? editBtn.style.display = "none" : '';
saveBtn ? saveBtn.style.display = "block" : '';
var name = document.getElementById("name_row" + no);
var value = document.getElementById("qty" + no);
var yes = document.getElementById("yes" + no);
var noEle = document.getElementById("no" + no);
var name_data = name && name.innerHTML;
var value_data = value && value.innerHTML;
var value_yes = yes && yes.innerHTML;
var value_no = noEle && noEle.innerHTML;
name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
value ? value.innerHTML = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>" : '';
yes ? yes.innerHTML = "<input type='radio' id='yes_radio" + no + "' value='" + value_yes + "'>" : '';
noEle ? noEle.innerHTML = "<input type='radio' id='no_radio" + no + "' value='" + value_no + "'>" : '';
}
function save_row(no)
{
var nameEle = document.getElementById("name_text" + no);
var name_val = nameEle && nameEle.value;
var valueEle = document.getElementById("value_text" + no);
var value_val = valueEle && valueEle.value;
var yesEle = document.getElementById("yes_radio" + no);
var noEle = document.getElementById("no_radio" + no);
var qtyEle = document.getElementById("qty" + no);
var yes_val = yesEle && yesEle.value;
var no_val = noEle && noELe.value;
document.getElementById("name_row" + no).innerHTML = name_val;
qtyEle ? qtyEle.innerHTML = value_val : '';
yesEle ? yesEle.innerHTML = yes_val : '';
noEle ? noEle.innerHTML = no_val : '';
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no)
{
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_name = document.getElementById("new_name").value;
var new_value = document.getElementById("new_value").value;
var new_yes = document.getElementById("new_yes").value;
var new_no = document.getElementById("new_no").value;
var table = document.getElementById("data_table");
var len = (table.rows.length) - 1;
var table_len = (document.querySelectorAll('.data_row').length) + 1;
var row = table.insertRow(len).outerHTML = "<tr class='data_row' id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='qty" + table_len + "'>" + new_value + "</td><td><input type='radio' id='yes" + table_len + "'>" + new_yes + "</td><td><input type='radio' id='no" + table_len + "'>" + new_no + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'><input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name").value = "";
document.getElementById("new_value").value = "";
document.getElementById("new_yes").value = "";
document.getElementById("new_no").value = "";
}
function add_row2()
{
var new_name=document.getElementById("new_name2").value;
var new_value=document.getElementById("new_value2").value;
var table=document.getElementById("data_table2");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='value_row"+table_len+"'>"+new_value+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name2").value="";
document.getElementById("new_value2").value="";
}
function add_row3()
{
var new_name=document.getElementById("new_name3").value;
var new_value=document.getElementById("new_value3").value;
var table=document.getElementById("data_table3");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='value_row"+table_len+"'>"+new_value+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name3").value="";
document.getElementById("new_value3").value="";
}
function add_row4()
{
var new_name=document.getElementById("new_name4").value;
var new_value=document.getElementById("new_value4").value;
var table=document.getElementById("data_table4");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='value_row"+table_len+"'>"+new_value+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name4").value="";
document.getElementById("new_value4").value="";
}
&#13;
答案 0 :(得分:4)
我无法使用评论,因此我决定在答案中分享我对您的代码的一些研究。
我复制了你的代码并在我的浏览器中运行,浏览器给了我一个错误:
Uncaught TypeError: Cannot read property 'style' of null
at edit_row (New Text Document.html:4)
at HTMLInputElement.onclick (New Text Document.html:87)
指出这句话:
document.getElementById("save_button" + no).style.display = "block";
看来你的html没有id为save_button1
的元素,我只看到一个元素有id savebtn1
。
更新: 运行编辑后的代码版本后,第一行表现良好。但第二行和另一行抛出错误:
Uncaught TypeError: Cannot read property 'innerHTML' of null
at edit_row (New Text Document.html?qty=20&qty=60&qty=60&qty=60:12)
at HTMLInputElement.onclick (New Text Document.html?qty=20&qty=60&qty=60&qty=60:86)
它再次与ID有关,你的无线电元素没有ID。
更新:我看到很多错误,因为元素没有有效ID,请确保您使用的元素具有正确的ID会有所帮助。
更新:嗯......让我们仔细检查您的编辑功能
Uncaught TypeError: Cannot read property 'innerHTML' of null
表示声明
var yes = document.getElementById("yes" + no);
在这里,浏览器将搜索其id为yes1
的元素,但在您的html中,它不存在。它确实有广播yes('1')
,但这与浏览器想要的不一样。在html中将广播ID从yes('1')
更改为yes1
会有所帮助。(或将javascript代码从"yes" + no
更改为"yes('" + no "')"
也很好)
这是“无”无线电。
执行此操作后,单击编辑按钮时不会抛出任何错误。
接下来,该行添加了两个无线电输入。 实际上这个功能很棒。但一个小错字很难破坏这一点。
<td input="" type="radio" id="yes_row6">on</td>
这是插入的功能。你可以清楚地看到它有什么问题。
第一个和第二个单元格为空,因为您没有在代码中添加输入元素。但它的ID似乎是正确的。另外我想知道为什么初始行没有单元格包含像value_rowX
的ID(X是数字),这是一个错误吗?
“编辑”和“删除”按钮不在同一行。他们搬家的原因是你在编辑按钮的代码之前错过了一个`标签。另一个错字。
更新:这是我的代码版本,它正在运行:
function edit_row(no) {
var editBtn = document.getElementById("edit_button" + no);
var saveBtn = document.getElementById("save_button" + no);
editBtn ? editBtn.style.display = "none" : '';
saveBtn ? saveBtn.style.display = "block" : '';
var name = document.getElementById("name_row" + no);
var value = document.getElementById("qty" + no);
var yes = document.getElementById("yes" + no);
var noEle = document.getElementById("no" + no);
var name_data = name && name.innerHTML;
var value_data = value && value.innerHTML;
var value_yes = yes && yes.innerHTML;
var value_no = noEle && noEle.innerHTML;
name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
value ? value.innerHTML = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>" : '';
yes ? yes.innerHTML = "<input type='radio' id='yes_radio" + no + "' value='" + value_yes + "'>" : '';
noEle ? noEle.innerHTML = "<input type='radio' id='no_radio" + no + "' value='" + value_no + "'>" : '';
}
function save_row(no) {
var nameEle = document.getElementById("name_text" + no);
var name_val = nameEle && nameEle.value;
var valueEle = document.getElementById("value_text" + no);
var value_val = valueEle && valueEle.value;
var yesEle = document.getElementById("yes_radio" + no);
var noEle = document.getElementById("no_radio" + no);
var qtyEle = document.getElementById("qty" + no);
var yes_val = yesEle && yesEle.value;
var no_val = noEle && noELe.value;
document.getElementById("name_row" + no).innerHTML = name_val;
qtyEle ? qtyEle.innerHTML = value_val : '';
yesEle ? yesEle.innerHTML = yes_val : '';
noEle ? noEle.innerHTML = no_val : '';
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no).outerHTML = "";
}
function add_row() {
var new_name = document.getElementById("new_name").value;
var new_value = document.getElementById("new_value").value;
var new_yes = document.getElementById("new_yes").value;
var new_no = document.getElementById("new_no").value;
var table = document.getElementById("data_table");
var len = (table.rows.length) - 1;
var table_len = (document.querySelectorAll('.data_row').length) + 1;
var row = table.insertRow(len).outerHTML = '<tr class="data_row" id="row' + table_len + '">' +
'<td id="name_row' + table_len + '">' + new_name + '</td>' +
'<td id="qty' + table_len + '">' + new_value + '</td>' +
'<td><input type="radio" id="yes"' + table_len + '">' + new_yes + '</td>' +
'<td><input type="radio" id="no"' + table_len + '">' + new_no + '</td>' +
'<td><input type="button" id="edit_button' + table_len + '" value="Edit" class="edit" onclick="edit_row(' + table_len + ')"> <input type="button" value="Delete" class="delete" onclick="delete_row(' + table_len + ')"></td>' +
"</tr>";
document.getElementById("new_name").value = "";
document.getElementById("new_value").value = "";
document.getElementById("new_yes").value = "";
document.getElementById("new_no").value = "";
}
function add_row2() {
var new_name = document.getElementById("new_name2").value;
var new_value = document.getElementById("new_value2").value;
var table = document.getElementById("data_table2");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name2").value = "";
document.getElementById("new_value2").value = "";
}
function add_row3() {
var new_name = document.getElementById("new_name3").value;
var new_value = document.getElementById("new_value3").value;
var table = document.getElementById("data_table3");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name3").value = "";
document.getElementById("new_value3").value = "";
}
function add_row4() {
var new_name = document.getElementById("new_name4").value;
var new_value = document.getElementById("new_value4").value;
var table = document.getElementById("data_table4");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name4").value = "";
document.getElementById("new_value4").value = "";
}
<div id="wrapper">
<form id="radioForm" method="get" align="center">
<table style="width:80% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3 align="center">
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
<td></td>
</tr>
<tr class="data_row" id="row1">
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td id="name_row1">Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="number" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes" id="yes('1')"></td>
<td class="cent"><input type="radio" name="group1" value="No" id="no('1')"></td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</label>
</tr>
<tr class="data_row" id="row2">
<label id="group2">
<td id="name_row2">Drop Test (Portable Only)</td>
<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group2" value="Yes" id="yes('2')"></td>
<td class="cent"><input type="radio" name="group2" value="No" id="no('2')"></td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</label>
</tr>
<tr class="data_row" id="row3">
<label id="group3">
<td id="name_row3">Power Up Test (Mobile Only)</td>
<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group3" value="Yes" id="yes('3')"></td>
<td class="cent"><input type="radio" name="group3" value="No" id="no('3')"></td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</label>
</tr>
<tr class="data_row" id="row4">
<label id="group4">
<td id="name_row4">User Interface Room</td>
<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group4" value="Yes" id="yes('4')"></td>
<td class="cent"><input type="radio" name="group4" value="No" id="no('4')"></td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')">
<input type="button" value="Delete" class="delete" onclick="delete_row('4')">
</td>
</label>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td class="cent"><input type="text" id="new_value"></td>
<td class="cent"><input type="radio" id="new_yes"></td>
<td class="cent"><input type="radio" id="new_no"></td>
<td class="cent"><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
<br>
<input type="submit" id="savebtn1" value="Save">
<br><br>
答案 1 :(得分:1)
你需要检查它是否存在,我只修改一个例子:
function edit_row(no) {
var editBtn = document.getElementById("edit_button" + no);
var saveBtn = document.getElementById("save_button" + no);
editBtn ? editBtn.style.display = "none" : '';
saveBtn ? saveBtn.style.display = "block" : '';
var name = document.getElementById("name_row" + no);
var value = document.getElementById("qty" + no);
var yes = document.getElementById("yes" + no);
var noEle = document.getElementById("no" + no);
var name_data = name && name.innerHTML;
var value_data = value && value.innerHTML;
var value_yes = yes && yes.innerHTML;
var value_no = noEle && noEle.innerHTML;
name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
value ? value.innerHTML = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>" : '';
yes ? yes.innerHTML = "<input type='radio' id='yes_radio" + no + "' value='" + value_yes + "'>" : '';
noEle ? noEle.innerHTML = "<input type='radio' id='no_radio" + no + "' value='" + value_no + "'>" : '';
}
function save_row(no) {
var nameEle = document.getElementById("name_text" + no);
var name_val = nameEle && nameEle.value;
var valueEle = document.getElementById("value_text" + no);
var value_val = valueEle && valueEle.value;
var yesEle = document.getElementById("yes_radio" + no);
var noEle = document.getElementById("no_radio" + no);
var qtyEle = document.getElementById("qty" + no);
var yes_val = yesEle && yesEle.value;
var no_val = noEle && noELe.value;
document.getElementById("name_row" + no).innerHTML = name_val;
qtyEle ? qtyEle.innerHTML = value_val : '';
yesEle ? yesEle.innerHTML = yes_val : '';
noEle ? noEle.innerHTML = no_val : '';
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_name = document.getElementById("new_name").value;
var new_value = document.getElementById("new_value").value;
var yes = document.getElementById("yes").value;
var no = document.getElementById("no").value;
var table = document.getElementById("data_table");
var len = (table.rows.length) - 1;
var table_len = (document.querySelectorAll('.data_row').length) + 1;
var row = table.insertRow(len).outerHTML = "<tr class='data_row' id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name").value = "";
document.getElementById("new_value").value = "";
}
&#13;
<div id="wrapper">
<form id="radioForm" method="get" align="center">
<table style="width:80% table-layout:fixed" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<h3 align="center">
<B>Initial (On Arrival)</B>
</h3>
<table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td class="cent"><b>Value</b></td>
<td class="cent"><b>Yes</b></td>
<td class="cent"><b>No</b></td>
<td></td>
</tr>
<tr class="data_row" id="row1">
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td id="name_row1">Initial (On Arrival)</td>
<!--The input box in the 'Value' column is set as below-->
<td class="cent"><input type="number" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td class="cent"><input type="radio" name="group1" value="Yes" id="yes('1')"></td>
<td class="cent"><input type="radio" name="group1" value="No" id="no('1')"></td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</label>
</tr>
<tr class="data_row" id="row2">
<label id="group2">
<td id="name_row2">Drop Test (Portable Only)</td>
<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group2" value="Yes" id="yes('2')"></td>
<td class="cent"><input type="radio" name="group2" value="No" id="no('2')"></td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</label>
</tr>
<tr class="data_row" id="row3">
<label id="group3">
<td id="name_row3">Power Up Test (Mobile Only)</td>
<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group3" value="Yes" id="yes('3')"></td>
<td class="cent"><input type="radio" name="group3" value="No" id="no('3')"></td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</label>
</tr>
<tr class="data_row" id="row4">
<label id="group4">
<td id="name_row4">User Interface Room</td>
<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td class="cent"><input type="radio" name="group4" value="Yes" id="yes('4')"></td>
<td class="cent"><input type="radio" name="group4" value="No" id="no('4')"></td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')">
<input type="button" value="Delete" class="delete" onclick="delete_row('4')">
</td>
</label>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td class="cent"><input type="text" id="new_value"></td>
<td class="cent"><input type="radio" id="yes" name="group28" value="Yes"></td>
<td class="cent"><input type="radio" id="no" name="group28" value="No"></td>
<td class="cent"><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
<br>
<input type="submit" id="savebtn1" value="Save">
<br><br>
&#13;