HTML - 添加行功能显示不需要的输出

Question

我在add_row功能中遇到了问题，因为当我倾向于单击Add Row按钮时，单选按钮倾向于分别在它们旁边显示单词on。我不希望在用户单击Add Row按钮时显示on单词。

需要这方面的帮助。

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>
	<!--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" 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>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button5" value="Edit" class="edit" onclick="edit_row('5')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('5')">
	</td>
  </label>
        </tr>
        <tr class="data_row" id="row6">
          <label id="group6">
    <td id="name_row6">User Interface Extreme</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button6" value="Edit" class="edit" onclick="edit_row('6')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('6')">
	</td>
  </label>
        </tr>
        <tr id="row7">
          <label id="group7">
    <td id="name_row7">Mic Talk Internal Extreme</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button7" value="Edit" class="edit" onclick="edit_row('7')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('7')">
	</td>
  </label>
        </tr>
        <tr id="row8">
          <label id="group8">
    <td id="name_row8">Mic Talk External Extreme</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button8" value="Edit" class="edit" onclick="edit_row('8')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('8')">
	</td>
  </label>
        </tr>
        <tr id="row9">
          <label id="group9">
    <td id="name_row9">Desense Test</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button9" value="Edit" class="edit" onclick="edit_row('9')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('9')">
	</td>
  </label>
        </tr>
        <tr id="row10">
          <label id="group10">
    <td id="name_row10">Tx Stability</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button10" value="Edit" class="edit" onclick="edit_row('10')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('10')">
	</td>
  </label>
        </tr>
        <tr id="row11">
          <label id="group11">
    <td id="name_row11">Microphonic Test</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button11" value="Edit" class="edit" onclick="edit_row('11')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('11')">
	</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>

Answer 1

在"add_row"函数中，你有这个代码

'<td><input type="radio" id="yes"' + table_len + '"checked>' + new_yes + '</td>' +
'<td><input type="radio" id="no"' + table_len + '">' + new_no + '</td>' +

new_yes附加变量的位置，new_no像这样初始化

var new_yes = document.getElementById("new_yes").value;
var new_no = document.getElementById("new_no").value;

单选按钮的初始值为"开"。

因此，只需删除new_yes和new_no变量

Answer 2

您必须

从函数的输出中删除"new_yes"和"new_no"变量。

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></td>' +
    '<td><input type="radio" id="no"' + table_len + '"></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></td>' +
    '<td><input type="radio" id="no"' + table_len + '"></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></td>' +
    '<td><input type="radio" id="no"' + table_len + '"></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></td>' +
    '<td><input type="radio" id="no"' + table_len + '"></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>
	<!--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" 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>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button5" value="Edit" class="edit" onclick="edit_row('5')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('5')">
	</td>
  </label>
        </tr>
        <tr class="data_row" id="row6">
          <label id="group6">
    <td id="name_row6">User Interface Extreme</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button6" value="Edit" class="edit" onclick="edit_row('6')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('6')">
	</td>
  </label>
        </tr>
        <tr id="row7">
          <label id="group7">
    <td id="name_row7">Mic Talk Internal Extreme</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button7" value="Edit" class="edit" onclick="edit_row('7')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('7')">
	</td>
  </label>
        </tr>
        <tr id="row8">
          <label id="group8">
    <td id="name_row8">Mic Talk External Extreme</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button8" value="Edit" class="edit" onclick="edit_row('8')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('8')">
	</td>
  </label>
        </tr>
        <tr id="row9">
          <label id="group9">
    <td id="name_row9">Desense Test</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button9" value="Edit" class="edit" onclick="edit_row('9')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('9')">
	</td>
  </label>
        </tr>
        <tr id="row10">
          <label id="group10">
    <td id="name_row10">Tx Stability</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button10" value="Edit" class="edit" onclick="edit_row('10')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('10')">
	</td>
  </label>
        </tr>
        <tr id="row11">
          <label id="group11">
    <td id="name_row11">Microphonic Test</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td>
	<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>
	<td>
		<input type="button" id="edit_button11" value="Edit" class="edit" onclick="edit_row('11')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('11')">
	</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>