0
我在我的add_row函數中遇到問題，因爲當我傾向於單擊Add Row按鈕時，單選按鈕傾向於分別在旁邊顯示單詞on。我不希望當用戶點擊Add Row按鈕時顯示on單詞。HTML - 添加行函數顯示不需要的輸出
需要幫助。
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 + '"checked>' + 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 new_yes = document.getElementById("new_yes2").value;
var new_no = document.getElementById("new_no2").value;
var table = document.getElementById("data_table2");
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 + '"checked>' + 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_name2").value = "";
document.getElementById("new_value2").value = "";
document.getElementById("new_yes2").value = "";
document.getElementById("new_no2").value = "";
}
function add_row3() {
var new_name = document.getElementById("new_name3").value;
var new_value = document.getElementById("new_value3").value;
var new_yes = document.getElementById("new_yes3").value;
var new_no = document.getElementById("new_no3").value;
var table = document.getElementById("data_table3");
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 + '"checked>' + 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_name3").value = "";
document.getElementById("new_value3").value = "";
document.getElementById("new_yes3").value = "";
document.getElementById("new_no3").value = "";
}
function add_row4() {
var new_name = document.getElementById("new_name4").value;
var new_value = document.getElementById("new_value4").value;
var new_yes = document.getElementById("new_yes4").value;
var new_no = document.getElementById("new_no4").value;
var table = document.getElementById("data_table4");
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 + '"checked>' + 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_name4").value = "";
document.getElementById("new_value4").value = "";
document.getElementById("new_yes4").value = "";
document.getElementById("new_no4").value = "";
}body {
background-color: #d62929;
font-family: Verdana, sans-serif;
margin: 0;
color: black;
}
.table1 {
border: 2px solid #000000;
}
.table1 td {
border: 2px solid #000000;
float: center;
text-align: left;
}
.table1 td.cent {
text-align: center;
}
.table1 th {
border: 2px solid #000000;
background: #4B0082;
color: white;
}
.table1 tr td:first-child {
width: 60%;
}
.table2 {
border: 2px solid #000000;
}
.table2 td {
border: 2px solid #000000;
float: center;
text-align: left;
}
.table2 td.cent {
text-align: center;
}
.table2 th {
border: 2px solid #000000;
background: #FF4500;
color: white;
}
.table2 tr td:first-child {
width: 60%;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
text-align: center;
float: center;
}
td {
border: 2px solid black;
text-align: left;
padding: 2px;
}
td.cent {
text-align: center;
}
td.left {
text-align: left;
}
th {
border: 2px solid black;
text-align: center;
padding: 2px;
}
.table1 tr:nth-child(even) {
background-color: #dddddd;
}
.table2 tr:nth-child(even) {
background-color: #FFE4C4;
}
input {
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid black;
width: 10%;
}
.button1:hover {
background-color: black;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 10%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #008CBA;
width: 10%;
}
.button3:hover {
background-color: #008CBA;
color: white;
}<div id="wrapper">
<form id="radioForm" method="get" align="center">
<table style="width:80% table-layout:fixed" align="center">
<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 <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" name="group28" id="new_yes"></td>
<td class="cent"><input type="radio" name="group28" 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>
<h3 align="center">
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:70%" align="center" id="data_table2" 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>
</tr>
<tr class="data_row" id="row5">
<label id="group5">
<td id="name_row5">ATE Labview RF Testing Extreme</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td>
\t <td class="cent"><input type="radio" name="group5" value="Yes" id="yes('5')"></td>
<td class="cent"><input type="radio" name="group5" value="No" id="no('5')"></td>
\t <td>
\t \t <input type="button" id="edit_button5" value="Edit" class="edit" onclick="edit_row('5')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('5')">
\t </td>
</label>
</tr>
<tr class="data_row" id="row6">
<label id="group6">
<td id="name_row6">User Interface Extreme</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td>
\t <td class="cent"><input type="radio" name="group6" value="Yes" id="yes('6')"></td>
<td class="cent"><input type="radio" name="group6" value="No" id="no('6')"></td>
\t <td>
\t \t <input type="button" id="edit_button6" value="Edit" class="edit" onclick="edit_row('6')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('6')">
\t </td>
</label>
</tr>
<tr id="row7">
<label id="group7">
<td id="name_row7">Mic Talk Internal Extreme</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td>
\t <td class="cent"><input type="radio" name="group7" value="Yes" id="yes('7')"></td>
<td class="cent"><input type="radio" name="group7" value="No" id="no('7')"></td>
\t <td>
\t \t <input type="button" id="edit_button7" value="Edit" class="edit" onclick="edit_row('7')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('7')">
\t </td>
</label>
</tr>
<tr id="row8">
<label id="group8">
<td id="name_row8">Mic Talk External Extreme</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td>
\t <td class="cent"><input type="radio" name="group8" value="Yes" id="yes('8')"></td>
<td class="cent"><input type="radio" name="group8" value="No" id="no('8')"></td>
\t <td>
\t \t <input type="button" id="edit_button8" value="Edit" class="edit" onclick="edit_row('8')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('8')">
\t </td>
</label>
</tr>
<tr id="row9">
<label id="group9">
<td id="name_row9">Desense Test</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td>
\t <td class="cent"><input type="radio" name="group9" value="Yes" id="yes('9')"></td>
<td class="cent"><input type="radio" name="group9" value="No" id="no('9')"></td>
\t <td>
\t \t <input type="button" id="edit_button9" value="Edit" class="edit" onclick="edit_row('9')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('9')">
\t </td>
</label>
</tr>
<tr id="row10">
<label id="group10">
<td id="name_row10">Tx Stability</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td>
\t <td class="cent"><input type="radio" name="group10" value="Yes" id="yes('10')"></td>
<td class="cent"><input type="radio" name="group10" value="No" id="no('10')"></td>
\t <td>
\t \t <input type="button" id="edit_button10" value="Edit" class="edit" onclick="edit_row('10')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('10')">
\t </td>
</label>
</tr>
<tr id="row11">
<label id="group11">
<td id="name_row11">Microphonic Test</td>
\t <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td>
\t <td class="cent"><input type="radio" name="group11" value="Yes" id="yes('11')"></td>
<td class="cent"><input type="radio" name="group11" value="No" id="no('11')"></td>
\t <td>
\t \t <input type="button" id="edit_button11" value="Edit" class="edit" onclick="edit_row('11')">
\t \t
\t \t <input type="button" value="Delete" class="delete" onclick="delete_row('11')">
\t </td>
</label>
</tr>
<tr>
<td><input type="text" id="new_name2"></td>
<td class="cent"><input type="text" id="new_value2"></td>
<td class="cent"><input type="radio" name="group29" value="Yes" id="new_yes2"></td>
<td class="cent"><input type="radio" name="group29" value="No" id="new_no2"></td>
<td class="cent"><input type="button" class="add" onclick="add_row2();" value="Add Row"></td>
</tr>
</table>
<br>
<input type="submit" id="savebtn2" value="Save">
<br><br>
<form align="center" method="post" action="report.html">
<input type="submit" value="Generate Report" name="action" class="button button2" />
</form>
<br>
<form align="center">
<div id="button"><button type="button" name="button3" onClick="alertFunc()" class="button button3">Save</button></div>
</form>
你的例子太長了。你能把它縮小到一個更簡單的案例，顯示你的問題？ – Mobius
您可能希望避免多次使用相同的「ID」。 'ID's應該是獨一無二的... – NewToJS
下次，我建議你發佈更短更客觀的問題，這將確保獲得更多幫助。 –