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

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];
                    }

}
            ?>

有更好的解决方案吗？

- Jacqueline Goh

---

动态添加的行将具有相同的id。因此错误。只需删除id并添加一个class以获取行并插入即可。 - Amit

嗨，阿米特，我不明白。有关于这个问题的例子吗？谢谢。 - Jacqueline Goh

在动态插入行时，您需要每次将BX_related的ID更改为某个随机ID。这就是我的意思。希望你明白了！ - Amit

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);

就是这样！！

- Eldho NewAge