添加行和编辑功能不起作用

-2

这里，我插入添加/编辑HTML和JavaScript代码/如图所示的代码片段删除/保存功能在各个表格。添加行和编辑功能不起作用

我遇到对的JavaScript代码的一些错误，当我倾向于移动工作台下面的Save按钮。另外，我还在Save和Edit函数中插入了单选按钮。

我无法运行修改后的Save和Edit函数，我希望能够解决这个问题的指导。

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; 
 
\t 
 
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; 
 
\t 
 
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; 
 
\t 
 
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> 
 
\t <!--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> 
 
\t <!--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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('1')"> 
 
\t </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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('2')"> 
 
\t </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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('3')"> 
 
\t </td> 
 
    </label> 
 
     </tr> 
 

 
     <tr class="data_row" id="row4"> 
 
      <label id="group4"> 
 
    <td id="name_row4">User Interface Room</td> 
 
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td> 
 
\t <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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('4')"> 
 
\t </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>

来源

2017-09-19 cerberus99

什么错误？什么不行？ – Rob

我看到的错误似乎足够清晰 - ''1'和'1'不一样，并且没有标识为'是'或'否'的项目。 –

@Rob感谢您的反馈。我已经更新了所述错误的问题。我无法运行保存和编辑功能。 – cerberus99

我不能使用意见，所以我决定分享在回答你的代码我的研究很少。

我复制你在我的浏览器代码和运行，浏览器给了我这样的错误：

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。

顺便说一句，你可以在你自己发现错误，只需打开HTML文件浏览器，点击右键，选择“检查”或任何其他的东西。这将打开一个控制台，你可以看到你的网页上发生了什么。

更新时间：运行你编辑的代码版本后，第一行是做好事。再次

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会有所帮助。

更新：嗯......让我们来看看你的编辑功能仔细

Uncaught TypeError: Cannot read property 'innerHTML' of null

for语句

var yes = document.getElementById("yes" + no);

这里，浏览器将搜索元素ID为yes1，但在你的HTML，它不存在。它确实有无线电yes('1')，但这与浏览器需要的不一样。将无线电ID从yes('1')更改为yes1在html中将有所帮助。（或将javascript代码从"yes" + no更改为"yes('" + no "')"也可以）对“无”收音机执行此操作。

这样做了以后，同时点击编辑按钮没有错误被抛出。

接下来，该行添加了丢失的两个无线电输入。其实这个功能做得很好。但一个小错字破坏了这一点。

<td input="" type="radio" id="yes_row6">on</td>

这是插入的功能。你可以清楚地看到它有什么问题。

第一个和第二个单元格是空的，因为您没有在代码中添加输入元素。但它的ID似乎是正确的。此外，我想知道为什么最初的行没有单元格包含像value_rowX（X是一个数字）的ID，这是一个错误？

编辑和删除按钮不在同一行上。他们移动的原因是你在编辑按钮的代码之前错过了一个`标签。另一个错字。

更新：这里是我的版本的代码，这是工作：

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> 
 
\t <!--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> 
 
\t <!--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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('1')"> 
 
\t </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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('2')"> 
 
\t </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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('3')"> 
 
\t </td> 
 
    </label> 
 
     </tr> 
 

 
     <tr class="data_row" id="row4"> 
 
      <label id="group4"> 
 
    <td id="name_row4">User Interface Room</td> 
 
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td> 
 
\t <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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('4')"> 
 
\t </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>

来源

2017-09-19 02:55:40 CodeingBoy

非常感谢您的反馈意见，我已经在代码片段中编辑了代码，并且删除了'save_row'函数，因为它不再需要使用了。非常感谢这些提示，我非常感谢。 – cerberus99

建议你可能会得票，因为我们可以认为这是一个答案，但不要养成习惯，要非常有选择性，直到你获得你的评论特权。 – Sand

@ cerberus99不客气，我更新了我在答案中找到的错误。 – CodeingBoy

你需要一些检查它是否存在，我只是修改一个例子：

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 = ""; 
 
}

<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> 
 
\t <!--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> 
 
\t <!--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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('1')"> 
 
\t </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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('2')"> 
 
\t </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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('3')"> 
 
\t </td> 
 
    </label> 
 
     </tr> 
 

 
     <tr class="data_row" id="row4"> 
 
      <label id="group4"> 
 
    <td id="name_row4">User Interface Room</td> 
 
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td> 
 
\t <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> 
 
\t <td> 
 
\t \t <input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')"> 
 
\t \t 
 
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('4')"> 
 
\t </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>

来源

2017-09-19 03:30:09 JiangangXiong

非常感谢反馈：Smh，编辑功能不起作用:( – cerberus99

我修改了它的工作方式，但是你没有添加保存按钮，所以保存对这个原始行不起作用，但对于新行它将会确定 – JiangangXiong

感谢了，编辑和添加行功能很好，但我似乎没有看到添加行功能中的“是”和“否”单选按钮:( – cerberus99

添加行和编辑功能不起作用

回答

相关问题