Question

我的剧本：

var rowNum = 0;
function addRow(frm) {

   var rowNum = $('#itemRows tr:last').attr("id");
   rowNum++;
  var row = '<tr id="'+rowNum+'"><td>'+rowNum+'</td><td><input type="text" name="nama[]" class="form-control" maxlength="10"></td><td> <div class="radio"><label><input name="gender" type="radio" value="man" checked="checked" />Laki-laki</label></div><div class="radio"><label><input name="gender" type="radio" value="woman" />Perempuan</label></div></td><td><input type="text" name="weight[]" class="form-control" maxlength="10"></td><td><input type="text" name="height[]" class="form-control" maxlength="10"></td><td><input type="text" name="lla[]" class="form-control" maxlength="4"></td><td><input type="text" name="lpgl[]" class="form-control" maxlength="4"></td><td><input type="text" name="lpgg[]" class="form-control" maxlength="4"></td><td><input type="text" name="tlk[]" class="form-control" maxlength="4"></td><td><input type="button" class="btn btn-warning btn-sm" value="Remove" onclick="removeRow('+rowNum+');"></td></tr>';
   jQuery('#itemRows').append(row);
   frm.add_qty.value = '';
   frm.add_name.value = '';

}

function removeRow(rnum) {
  jQuery('#'+rnum).remove();
  //susahnya ini kodong,....lamanya saya buat ini
  $('tr').not(':first').each(function() {
        $(this).children('td').first().html($(this).index()); 
        $(this).attr('id',$(this).index());
        var remo = 'removeRow('+$(this).index()+');';
        $(this).find('.btn-remo').attr("onclick",remo);

    });
}

html看起来像这样：

<form action="hasilObes.php" method="get" name="obes">
<table class="table table-striped" id="itemRows" cellpadding="3">
  <tr id="0">
    <th scope="col">No.</th>
    <th scope="col">Nama</th>
    <th scope="col">Gender</th>
    <th scope="col">BB</th>
    <th scope="col">TB</th>
    <th scope="col">LLA</th>
    <th scope="col">LPGI</th>
    <th scope="col">LPGG</th>
    <th scope="col">TLK</th>
    <th scope="col"><input class="btn btn-remo btn-info" onclick="addRow(this.form);" type="button" value="Tambah" /></th>
  </tr>


</table>


<input class="btn btn-success" type="submit" name="submit" value="kalkulasi" />
</form>

如果我点击按钮“tambah”，..那么新行将被添加，默认值为单选按钮（性别）是“man”，...但是如果我然后添加新行，..值的收音机（性别）上一行或其他行已经消失，...现在如何在添加新行时保留其他行的“man”/“woman”值？

Answer 1

这是因为每次添加一行时，您都会添加两个名称相同的单选按钮，因此它们属于同一个单选按钮组（全部名为“gender”）。我建议您只需更改单选按钮的名称，以便每行都是自己的组。

在代码的var row =行中，更改：

name="gender"

为：

name="row'+rowNum+'gender"

<强> jsFiddle example

这将产生单选按钮组，其中一对单选按钮具有名称，例如：row1gender，row2gender，row3gender等。

Answer 2

单选按钮名称对于每个新行都相同，现在提供了动态性别名称name="gender_'+rowNum+'"

    var rowNum = 0;
    function addRow(frm) {

       var rowNum = $('#itemRows tr:last').attr("id");
       rowNum++;
      var row = '<tr id="'+rowNum+'"><td>'+rowNum+'</td><td><input type="text" name="nama[]" class="form-control" maxlength="10"></td><td> <div class="radio"><label><input name="gender_'+rowNum+'" type="radio" value="man" checked="checked" />Laki-laki</label></div><div class="radio"><label><input name="gender_'+rowNum+'" type="radio" value="woman" />Perempuan</label></div></td><td><input type="text" name="weight[]" class="form-control" maxlength="10"></td><td><input type="text" name="height[]" class="form-control" maxlength="10"></td><td><input type="text" name="lla[]" class="form-control" maxlength="4"></td><td><input type="text" name="lpgl[]" class="form-control" maxlength="4"></td><td><input type="text" name="lpgg[]" class="form-control" maxlength="4"></td><td><input type="text" name="tlk[]" class="form-control" maxlength="4"></td><td><input type="button" class="btn btn-warning btn-sm" value="Remove" onclick="removeRow('+rowNum+');"></td></tr>';
       jQuery('#itemRows').append(row);
     //  frm.add_qty.value = '';
      // frm.add_name.value = '';

    }

    function removeRow(rnum) {
      jQuery('#'+rnum).remove();
      //susahnya ini kodong,....lamanya saya buat ini
      $('tr').not(':first').each(function() {
            $(this).children('td').first().html($(this).index()); 
            $(this).attr('id',$(this).index());
            var remo = 'removeRow('+$(this).index()+');';
            $(this).find('.btn-remo').attr("onclick",remo);

        });
    }

保持单选按钮在动态表单上的值

2 个答案: