javascript - 动态添加行上的数组单选按钮

Question

我有一个允许用户动态添加行的表单。表单内有数组单选按钮。

问题:

1. 当我尝试点击第二行的单选按钮或其他原始按钮时，单选按钮的值将仅显示在第一列中，而其他的则有偏移错误。

   一开始，我的概念是值会按照数组列存储，结果不是。

2. 因此，我尝试使用 JavaScript 设置每个原始单选按钮的值，但它显示此错误:

   Uncaught TypeError: Cannot read property '2' of null

function addRow(tableID) {
	var table = document.getElementById(tableID);
	var radioB = document.getElementById(BX_related);
	var rowCount = table.rows.length;
							// limit the user from creating fields more than your limits
		var row = table.insertRow(rowCount);
		var colCount = table.rows[0].cells.length;

		for(var i=0; i<colCount; i++) {
			
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[1].cells[i].innerHTML; //row[which table u need to duplicate]
			table.rows[rowCount].cells[0].innerHTML = rowCount;
			}
			radioB[rowCount].value = rowCount;

}

<table id="dataTable" class="form" border="0">
	<tbody>
		<tr><th>Bil.</th><th>Nama</th><th>Umur</th><th>Dij./Ting.</th><th>Pekerjaan</th><th>Catatan</th><th>Berkenaan</th></tr>
		<tr ><td>1</td>
		<td><input type="text" name="BX_name[]" size="30"></td>
		<td><input type="text" name="BX_age[]"size="2" ></td>
		<td><input type="text" name="BX_study[]"size="8"></td>
		<td><input type="text" name="BX_work[]" size="10"></td>
		<td><input type="text" name="BX_note[]"size="15"></td>
		<td> <input type="radio" name="BX_related[]" id="BX_related" value="" required></td></tr>
	</tbody>
	</table>

PHP 部分:

<?php 
            $i =0;
            if(isset($_POST)=='submit'){

                $BX_name=$_POST['BX_name'];
                $BX_age=$_POST['BX_age'];
                $BX_related = $_POST['BX_related'];         
                echo $BX_related;
                foreach($BX_name as $a => $b)
                    {   
                        $i ++;                              
                    echo "<br> $i";
                        echo "name: ";
                        echo $BX_name[$a];
                    }

}
            ?>

谁有更好的解决方案？

Answer 1

改变

<input type="radio" name="BX_related[]" id="BX_related" value="" required>

到

<input type="radio" name="BX_related[]" class="BX_related" value="" required></td>

同样在 addRow 函数中，而不是

  var radioB = document.getElementById(BX_related);

使用

  var radioB = document.getElementsByClassName('BX_related);

就是这样!