添加行和編輯功能不起作用

-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

添加行和編輯功能不起作用

回答

相關問題