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

时间:2017-09-19 02:23:05

标签: javascript html

在这里,我已经为相应的表插入了添加/编辑/删除/保存功能的HTML和JavaScript代码,如代码段所示。

当我倾向于移动表格下方的</TBL>按钮时,我在JavaScript代码上遇到了一些错误。此外,我还在SaveSave功能中插入了单选按钮。

我无法在修改后运行EditSave函数,我将非常感谢您解决此问题的指导。

&#13;
&#13;
Edit
&#13;
function edit_row(no) 
{
  var editBtn = document.getElementById("edit_button" + no);
  var saveBtn = document.getElementById("save_button" + no);
  editBtn ? editBtn.style.display = "none" : '';
  saveBtn ? saveBtn.style.display = "block" : '';

  var name = document.getElementById("name_row" + no);
  var value = document.getElementById("qty" + no);
  var yes = document.getElementById("yes" + no);
  var noEle = document.getElementById("no" + no);

  var name_data = name && name.innerHTML;
  var value_data = value && value.innerHTML;
  var value_yes = yes && yes.innerHTML;
  var value_no = noEle && noEle.innerHTML;

  name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
  value ? value.innerHTML = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>" : '';
  yes ? yes.innerHTML = "<input type='radio' id='yes_radio" + no + "' value='" + value_yes + "'>" : '';
  noEle ? noEle.innerHTML = "<input type='radio' id='no_radio" + no + "' value='" + value_no + "'>" : '';
}

function save_row(no) 
{
  var nameEle = document.getElementById("name_text" + no);
  var name_val = nameEle && nameEle.value;
  var valueEle = document.getElementById("value_text" + no);
  var value_val = valueEle && valueEle.value;
  var yesEle = document.getElementById("yes_radio" + no);
  var noEle = document.getElementById("no_radio" + no);
  var qtyEle = document.getElementById("qty" + no);
  var yes_val = yesEle && yesEle.value;
  var no_val = noEle && noELe.value;

  document.getElementById("name_row" + no).innerHTML = name_val;
  qtyEle ? qtyEle.innerHTML = value_val : '';
  yesEle ? yesEle.innerHTML = yes_val : '';
  noEle ? noEle.innerHTML = no_val : '';

  document.getElementById("edit_button" + no).style.display = "block";
  document.getElementById("save_button" + no).style.display = "none";
}

function delete_row(no) 
{
  document.getElementById("row" + no + "").outerHTML = "";
}

function add_row() {
  var new_name = document.getElementById("new_name").value;
  var new_value = document.getElementById("new_value").value;
  var new_yes = document.getElementById("new_yes").value;
  var new_no = document.getElementById("new_no").value;

  var table = document.getElementById("data_table");
  var len = (table.rows.length) - 1;
  var table_len =  (document.querySelectorAll('.data_row').length) + 1;
  var row = table.insertRow(len).outerHTML = "<tr class='data_row' id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='qty" + table_len + "'>" + new_value + "</td><td><input type='radio' id='yes" + table_len + "'>" + new_yes + "</td><td><input type='radio' id='no" + table_len + "'>" + new_no + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'><input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

  document.getElementById("new_name").value = "";
  document.getElementById("new_value").value = "";
  document.getElementById("new_yes").value = "";
  document.getElementById("new_no").value = "";
}

function add_row2()
{
 var new_name=document.getElementById("new_name2").value;
 var new_value=document.getElementById("new_value2").value;
	
 var table=document.getElementById("data_table2");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='value_row"+table_len+"'>"+new_value+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

 document.getElementById("new_name2").value="";
 document.getElementById("new_value2").value="";
}

function add_row3()
{
 var new_name=document.getElementById("new_name3").value;
 var new_value=document.getElementById("new_value3").value;
	
 var table=document.getElementById("data_table3");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='value_row"+table_len+"'>"+new_value+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

 document.getElementById("new_name3").value="";
 document.getElementById("new_value3").value="";
}

function add_row4()
{
 var new_name=document.getElementById("new_name4").value;
 var new_value=document.getElementById("new_value4").value;
	
 var table=document.getElementById("data_table4");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='value_row"+table_len+"'>"+new_value+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

 document.getElementById("new_name4").value="";
 document.getElementById("new_value4").value="";
}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:4)

我无法使用评论,因此我决定在答案中分享我对您的代码的一些研究。

我复制了你的代码并在我的浏览器中运行,浏览器给了我一个错误:

Uncaught TypeError: Cannot read property 'style' of null
   at edit_row (New Text Document.html:4)
   at HTMLInputElement.onclick (New Text Document.html:87)

指出这句话:

document.getElementById("save_button" + no).style.display = "block";

看来你的html没有id为save_button1的元素,我只看到一个元素有id savebtn1

顺便说一下,您可以自己检测错误,只需在浏览器中打开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。

更新:我看到很多错误,因为元素没有有效ID,请确保您使用的元素具有正确的ID会有所帮助。

更新:嗯......让我们仔细检查您的编辑功能

Uncaught TypeError: Cannot read property 'innerHTML' of null

表示声明

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

在这里,浏览器将搜索其id为yes1的元素,但在您的html中,它不存在。它确实有广播yes('1'),但这与浏览器想要的不一样。在html中将广播ID从yes('1')更改为yes1会有所帮助。(或将javascript代码从"yes" + no更改为"yes('" + no "')"也很好) 这是“无”无线电。

执行此操作后,单击编辑按钮时不会抛出任何错误。

接下来,该行添加了两个无线电输入。 实际上这个功能很棒。但一个小错字很难破坏这一点。

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

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

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

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

更新:这是我的代码版本,它正在运行:

function edit_row(no) {
  var editBtn = document.getElementById("edit_button" + no);
  var saveBtn = document.getElementById("save_button" + no);
  editBtn ? editBtn.style.display = "none" : '';
  saveBtn ? saveBtn.style.display = "block" : '';

  var name = document.getElementById("name_row" + no);
  var value = document.getElementById("qty" + no);
  var yes = document.getElementById("yes" + no);
  var noEle = document.getElementById("no" + no);

  var name_data = name && name.innerHTML;
  var value_data = value && value.innerHTML;
  var value_yes = yes && yes.innerHTML;
  var value_no = noEle && noEle.innerHTML;

  name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
  value ? value.innerHTML = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>" : '';
  yes ? yes.innerHTML = "<input type='radio' id='yes_radio" + no + "' value='" + value_yes + "'>" : '';
  noEle ? noEle.innerHTML = "<input type='radio' id='no_radio" + no + "' value='" + value_no + "'>" : '';
}

function save_row(no) {
  var nameEle = document.getElementById("name_text" + no);
  var name_val = nameEle && nameEle.value;
  var valueEle = document.getElementById("value_text" + no);
  var value_val = valueEle && valueEle.value;
  var yesEle = document.getElementById("yes_radio" + no);
  var noEle = document.getElementById("no_radio" + no);
  var qtyEle = document.getElementById("qty" + no);
  var yes_val = yesEle && yesEle.value;
  var no_val = noEle && noELe.value;

  document.getElementById("name_row" + no).innerHTML = name_val;
  qtyEle ? qtyEle.innerHTML = value_val : '';
  yesEle ? yesEle.innerHTML = yes_val : '';
  noEle ? noEle.innerHTML = no_val : '';

  document.getElementById("edit_button" + no).style.display = "block";
  document.getElementById("save_button" + no).style.display = "none";
}

function delete_row(no) {
  document.getElementById("row" + no).outerHTML = "";
}

function add_row() {
  var new_name = document.getElementById("new_name").value;
  var new_value = document.getElementById("new_value").value;
  var new_yes = document.getElementById("new_yes").value;
  var new_no = document.getElementById("new_no").value;

  var table = document.getElementById("data_table");
  var len = (table.rows.length) - 1;
  var table_len = (document.querySelectorAll('.data_row').length) + 1;
  var row = table.insertRow(len).outerHTML = '<tr class="data_row" id="row' + table_len + '">' +
    '<td id="name_row' + table_len + '">' + new_name + '</td>' +
    '<td id="qty' + table_len + '">' + new_value + '</td>' +
    '<td><input type="radio" id="yes"' + table_len + '">' + new_yes + '</td>' +
    '<td><input type="radio" id="no"' + table_len + '">' + new_no + '</td>' +
    '<td><input type="button" id="edit_button' + table_len + '" value="Edit" class="edit" onclick="edit_row(' + table_len + ')"> <input type="button" value="Delete" class="delete" onclick="delete_row(' + table_len + ')"></td>' +
    "</tr>";

  document.getElementById("new_name").value = "";
  document.getElementById("new_value").value = "";
  document.getElementById("new_yes").value = "";
  document.getElementById("new_no").value = "";
}

function add_row2() {
  var new_name = document.getElementById("new_name2").value;
  var new_value = document.getElementById("new_value2").value;

  var table = document.getElementById("data_table2");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

  document.getElementById("new_name2").value = "";
  document.getElementById("new_value2").value = "";
}

function add_row3() {
  var new_name = document.getElementById("new_name3").value;
  var new_value = document.getElementById("new_value3").value;

  var table = document.getElementById("data_table3");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

  document.getElementById("new_name3").value = "";
  document.getElementById("new_value3").value = "";
}

function add_row4() {
  var new_name = document.getElementById("new_name4").value;
  var new_value = document.getElementById("new_value4").value;

  var table = document.getElementById("data_table4");
  var table_len = (table.rows.length) - 1;
  var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

  document.getElementById("new_name4").value = "";
  document.getElementById("new_value4").value = "";
}
<div id="wrapper">
  <form id="radioForm" method="get" align="center">
    <table style="width:80% table-layout:fixed" align="center">

      <!--Attributes of table. Colspan used to insert sub-title for the main title.-->
      <h3 align="center">
        <B>Initial (On Arrival)</B>
      </h3>
      <table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>
        <tr>
          <th>Test Points</th>
          <th colspan="4">Cycle-Time</th>
        </tr>

        <tr>
          <td></td>
          <td class="cent"><b>Value</b></td>
          <td class="cent"><b>Yes</b></td>
          <td class="cent"><b>No</b></td>
          <td></td>
        </tr>

        <tr class="data_row" id="row1">
          <label id="group1"> <!--label is used to control the respective group of radio buttons-->
    <td id="name_row1">Initial (On Arrival)</td>
	<!--The input box in the 'Value' column is set as below-->
    <td class="cent"><input type="number" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
	<!--The check boxes of 'Yes' and 'No' is created as below-->
    <td class="cent"><input type="radio" name="group1" value="Yes" id="yes('1')"></td>
    <td class="cent"><input type="radio" name="group1" value="No" id="no('1')"></td>
	<td>
		<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
	</td>
  </label>
        </tr>


        <tr class="data_row" id="row2">
          <label id="group2">
    <td id="name_row2">Drop Test (Portable Only)</td>
    <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
    <td class="cent"><input type="radio" name="group2" value="Yes" id="yes('2')"></td>
    <td class="cent"><input type="radio" name="group2" value="No" id="no('2')"></td>
	<td>
		<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
	</td>
  </label>
        </tr>

        <tr class="data_row" id="row3">
          <label id="group3">
    <td id="name_row3">Power Up Test (Mobile Only)</td>
    <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
    <td class="cent"><input type="radio" name="group3" value="Yes" id="yes('3')"></td>
    <td class="cent"><input type="radio" name="group3" value="No" id="no('3')"></td>
	<td>
		<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
	</td>
  </label>
        </tr>

        <tr class="data_row" id="row4">
          <label id="group4">
    <td id="name_row4">User Interface Room</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
	<td class="cent"><input type="radio" name="group4" value="Yes" id="yes('4')"></td>
    <td class="cent"><input type="radio" name="group4" value="No" id="no('4')"></td>
	<td>
		<input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('4')">
	</td>
  </label>
        </tr>

        <tr>
          <td><input type="text" id="new_name"></td>
          <td class="cent"><input type="text" id="new_value"></td>
          <td class="cent"><input type="radio" id="new_yes"></td>
          <td class="cent"><input type="radio" id="new_no"></td>
          <td class="cent"><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
        </tr>

      </table>
      <br>
      <input type="submit" id="savebtn1" value="Save">
      <br><br>

答案 1 :(得分:1)

你需要检查它是否存在,我只修改一个例子:

&#13;
&#13;
function edit_row(no) {
  var editBtn = document.getElementById("edit_button" + no);
  var saveBtn = document.getElementById("save_button" + no);
  editBtn ? editBtn.style.display = "none" : '';
  saveBtn ? saveBtn.style.display = "block" : '';

  var name = document.getElementById("name_row" + no);
  var value = document.getElementById("qty" + no);
  var yes = document.getElementById("yes" + no);
  var noEle = document.getElementById("no" + no);

  var name_data = name && name.innerHTML;
  var value_data = value && value.innerHTML;
  var value_yes = yes && yes.innerHTML;
  var value_no = noEle && noEle.innerHTML;

  name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
  value ? value.innerHTML = "<input type='text' id='value_text" + no + "' value='" + value_data + "'>" : '';
  yes ? yes.innerHTML = "<input type='radio' id='yes_radio" + no + "' value='" + value_yes + "'>" : '';
  noEle ? noEle.innerHTML = "<input type='radio' id='no_radio" + no + "' value='" + value_no + "'>" : '';
}

function save_row(no) {
  var nameEle = document.getElementById("name_text" + no);
  var name_val = nameEle && nameEle.value;
  var valueEle = document.getElementById("value_text" + no);
  var value_val = valueEle && valueEle.value;
  var yesEle = document.getElementById("yes_radio" + no);
  var noEle = document.getElementById("no_radio" + no);
  var qtyEle = document.getElementById("qty" + no);
  var yes_val = yesEle && yesEle.value;
  var no_val = noEle && noELe.value;

  document.getElementById("name_row" + no).innerHTML = name_val;
  qtyEle ? qtyEle.innerHTML = value_val : '';
  yesEle ? yesEle.innerHTML = yes_val : '';
  noEle ? noEle.innerHTML = no_val : '';

  document.getElementById("edit_button" + no).style.display = "block";
  document.getElementById("save_button" + no).style.display = "none";
}

function delete_row(no) {
  document.getElementById("row" + no + "").outerHTML = "";
}

function add_row() {
  var new_name = document.getElementById("new_name").value;
  var new_value = document.getElementById("new_value").value;
  var yes = document.getElementById("yes").value;
  var no = document.getElementById("no").value;

  var table = document.getElementById("data_table");
  var len = (table.rows.length) - 1;
  var table_len =  (document.querySelectorAll('.data_row').length) + 1;
  var row = table.insertRow(len).outerHTML = "<tr class='data_row' id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='value_row" + table_len + "'>" + new_value + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

  document.getElementById("new_name").value = "";
  document.getElementById("new_value").value = "";
}
&#13;
<div id="wrapper">
  <form id="radioForm" method="get" align="center">
    <table style="width:80% table-layout:fixed" align="center">

      <!--Attributes of table. Colspan used to insert sub-title for the main title.-->
      <h3 align="center">
        <B>Initial (On Arrival)</B>
      </h3>
      <table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>
        <tr>
          <th>Test Points</th>
          <th colspan="4">Cycle-Time</th>
        </tr>

        <tr>
          <td></td>
          <td class="cent"><b>Value</b></td>
          <td class="cent"><b>Yes</b></td>
          <td class="cent"><b>No</b></td>
          <td></td>
        </tr>

        <tr class="data_row" id="row1">
          <label id="group1"> <!--label is used to control the respective group of radio buttons-->
    <td id="name_row1">Initial (On Arrival)</td>
	<!--The input box in the 'Value' column is set as below-->
    <td class="cent"><input type="number" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
	<!--The check boxes of 'Yes' and 'No' is created as below-->
    <td class="cent"><input type="radio" name="group1" value="Yes" id="yes('1')"></td>
    <td class="cent"><input type="radio" name="group1" value="No" id="no('1')"></td>
	<td>
		<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
	</td>
  </label>
        </tr>


        <tr class="data_row" id="row2">
          <label id="group2">
    <td id="name_row2">Drop Test (Portable Only)</td>
    <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
    <td class="cent"><input type="radio" name="group2" value="Yes" id="yes('2')"></td>
    <td class="cent"><input type="radio" name="group2" value="No" id="no('2')"></td>
	<td>
		<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
	</td>
  </label>
        </tr>

        <tr class="data_row" id="row3">
          <label id="group3">
    <td id="name_row3">Power Up Test (Mobile Only)</td>
    <td class="cent"><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
    <td class="cent"><input type="radio" name="group3" value="Yes" id="yes('3')"></td>
    <td class="cent"><input type="radio" name="group3" value="No" id="no('3')"></td>
	<td>
		<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
	</td>
  </label>
        </tr>

        <tr class="data_row" id="row4">
          <label id="group4">
    <td id="name_row4">User Interface Room</td>
	<td class="cent"><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
	<td class="cent"><input type="radio" name="group4" value="Yes" id="yes('4')"></td>
    <td class="cent"><input type="radio" name="group4" value="No" id="no('4')"></td>
	<td>
		<input type="button" id="edit_button4" value="Edit" class="edit" onclick="edit_row('4')">
		
		<input type="button" value="Delete" class="delete" onclick="delete_row('4')">
	</td>
  </label>
        </tr>

        <tr>
          <td><input type="text" id="new_name"></td>
          <td class="cent"><input type="text" id="new_value"></td>
          <td class="cent"><input type="radio" id="yes" name="group28" value="Yes"></td>
          <td class="cent"><input type="radio" id="no" name="group28" value="No"></td>
          <td class="cent"><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
        </tr>

      </table>
      <br>
      <input type="submit" id="savebtn1" value="Save">
      <br><br>
&#13;
&#13;
&#13;