HTML，JavaScript - 单选按钮选择不显示在新行中

Question

我为下面的表格添加了添加/编辑/删除功能。我设法在 JavaScript 中开发了 add_row 函数。当我单击 Add Row 按钮而不是单选按钮时，文本输入似乎有效。当我选择是/否并单击Add Row 按钮时，选择不会显示在创建的新行中。

如果我能得到解决这个问题的一些指导，我将不胜感激。

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

<table style="width:80% table-layout:fixed" align="center">

  <table class="table1" style="width:70%" align="center" id="data_table" cellspacing=2 cellspacing=5>

    <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</td>
	<!--The input box in the 'Value' column is set as below-->
    <td class="cent"><input type="number" value="<%=initial%>" align="center" name="Initial" 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</td>
    <td class="cent"><input type="number" value="<%=droptest%>" align="center" name="Drop Test" 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</td>
    <td class="cent"><input type="number" value="<%=powerup%>" align="center" name="Power Up" 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>
      <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>
  </table>

Answer 1

对不起，如果你不希望我这样做，但我特意重写了你的代码，因为它很混乱，而且有一些不合适的编码方式。

var divButtons = document.querySelector('.buttons');
var divBoard   = document.querySelector('.board');

var inputFir = divButtons.children[0];
var inputSec = divButtons.children[1];
var radioYes = divButtons.children[2];
var radioNo  = divButtons.children[3];
var submit   = divButtons.children[4];
var radioCount = 1;

submit.addEventListener('click', function(e){
  e.stopPropagation();
  var div    = document.createElement('div');
  var input1 = document.createElement('input');
  var input2 = document.createElement('input');
  var radio1 = document.createElement('input');
  var radio2 = document.createElement('input');
  
  radio1.type  = 'radio';
  radio2.type  = 'radio';
  radio1.name  = radioCount;
  radio2.name  = radioCount;
  radioCount++;
  
  input1.value = inputFir.value;
  input2.value = inputSec.value;
  
  if(!radioYes.checked && !radioNo.checked){
    radio1.checked = true;
  }else if(radioYes.checked){
    radio1.checked = true;
  }else if(radioNo.checked){
    radio2.checked = true;
  }
  
  div.append(input1, input2, radio1, radio2);
  divBoard.append(div);
});

<div class="board">

</div>
<div class="buttons">
  <input type="text" id="input1"/>
  <input type="text" id="input2"/>
  <input type="radio" name="radio0" id="radioY"/>
  <input type="radio" name="radio0" id="radioN"/>
  <input type="button" id="submit" value="Add Row"/>
</div>

首先，您最好不要过多地接近 DOM 元素，检索任何 DOM 元素会花费您“时间”。因此，优化它的最佳方法是只访问 DOM 一次或尽可能少地访问 DOM，并将其地址保存到变量中。即使您可能认为应该搜索子元素，例如

divButtons.children[0]

但是，这要快得多。

第二，使用 innerHTML 创建 DOM 并不总是最好的选择。你也可以像我一样使用 createElement 方法。如果您有兴趣并想知道为什么，请查看此链接。 enter link description here

而且，如果你使用innerHTML，这意味着你将面临sql注入攻击的风险。也检查一下。 enter link description here

第三，当侦听器事件被触发时，您可以通过放置 e.stopPropagation() 来停止冒泡事件。要了解有关它的更多信息，请单击此处。 enter link description here