Question

这是我表格中的一行。

<td>
   <select id="itemcodeid" name="itemcode[]" class="form-control itemcode">
      <option></option>
      @foreach($productsdata as $d)
            <option>{{$d->itemcode}}</option>
      @endforeach
      </select>
</td>

我正在使用Select2来填充数据。

<script type="text/javascript">
      $("#itemcodeid").select2
       ({
            placeholder: "Select Itemcode",
            allowClear: true
        });
</script>

但是当我向表添加行时如何使用id引用即将到来的行。因为这仅适用于第一行。

下面是第一行的图像。
但在其他行中我无法键入和选择（第二个图像），因为没有完成id引用，所以请告诉如何引用添加的行的id。帮助或建议将非常有用。谢谢。

这是我按下加号按钮（验证图像）时执行的代码。

<script type="text/javascript">
  $('.addrow').on('click',function()
  {  addrowfn();
  });
  function addrowfn()
  {
    var tr =  '<tr>'+
              '<td>'+
              '<select id="itemcodeid" name="itemcode[]" class="form-control itemcode">'+
              '<option></option>'+
              '@foreach($productsdata as $d)'+
              '<option>{{$d->itemcode}}</option>'+
              '@endforeach'+
              '</select>'+
              '</td>'+
              '<td><input type="text" name="proname[]" class="form-control proname"></td>'+
              '<td><input type="text" name="actualprice[]" class="form-control actualprice"></td>'+
              '<td><input type="text" name="discount[]" class="form-control discount"></td>'+
              '<td><input type="text" name="gst[]" class="form-control gst"></td>'+
              '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+
              '<td><input type="text" name="finalprorate[]" class="form-control finalprorate"></td>'+
              '<td><input type="text" name="finalbillrate[]" class="form-control finalbillrate"></td>'+
              '<td>'+
              '<a href="#" class="remove btn btn-danger">'+
              '<center>'+
              '<i class="glyphicon glyphicon-remove"></i>'+
              '</center>'+
              '</a>'+
              '</td>'+
              '</tr>';
    $('tbody').append(tr);          
  }
  $('body').on('click','.remove',function()
    {  var l=$('tbody tr').length;
       console.log(l);
    if(l==1)
    {  alert('You Cannot Remove all Rows!!!');
    }
    else 
       $(this).parent().parent().remove();

  });
</script>

请告诉我是否有任何更正。

Answer 1

我不确定这段代码是否有效，因为我没有测试过，但我至少会做出这两项修改：

使用 MutationObserver 侦听附加节点，然后转动常规选择成select2（）;

创建一个变量来跟踪行，并使每个选择的ID动态化，例如'itemcodeid_3'和'itemcodeid_5'等。对'name'属性

执行相同操作

var target = document.getElementById('<INSERT_ID_HERE>'); 
var rows = 1;
if (target) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation && mutation.addedNodes) {
                mutation.addedNodes.forEach(function(el) {
                    if (el && el.nodeName === "SELECT") {
                        $(el).select2();
                    }
                });
            }
        });
    }); 

    observer.observe(target, {
        childList: true
    });
} // end if

$('.addrow').on('click',function()
{  
    addrowfn();
});
function addrowfn()
{
    rows++;
    var tr =  '<tr>'+
              '<td>'+
              '<select id="itemcodeid_" ' + rows + ' name="itemcode_' + rows + '[]" class="form-control itemcode">'+
              '<option></option>'+
              '@foreach($productsdata as $d)'+
              '<option>{{$d->itemcode}}</option>'+
              '@endforeach'+
              '</select>'+
              '</td>'+
              '<td><input type="text" name="proname[]" class="form-control proname"></td>'+
              '<td><input type="text" name="actualprice[]" class="form-control actualprice"></td>'+
              '<td><input type="text" name="discount[]" class="form-control discount"></td>'+
              '<td><input type="text" name="gst[]" class="form-control gst"></td>'+
              '<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+
              '<td><input type="text" name="finalprorate[]" class="form-control finalprorate"></td>'+
              '<td><input type="text" name="finalbillrate[]" class="form-control finalbillrate"></td>'+
              '<td>'+
              '<a href="#" class="remove btn btn-danger">'+
              '<center>'+
              '<i class="glyphicon glyphicon-remove"></i>'+
              '</center>'+
              '</a>'+
              '</td>'+
              '</tr>';
    $('tbody').append(tr);          
}
$('body').on('click','.remove',function()
{  
    var l=$('tbody tr').length;
    console.log(l);
    if(l==1)
    {  
        alert('You Cannot Remove all Rows!!!');
    }
    else {
       $(this).parent().parent().remove();
    }

});

它可能不起作用，因为它看到附加节点而不是......必须测试

此外，您可能希望使用模板引擎，例如John Resig's jQuery solution或Mustache.js， Handlebars.js

如何为列的每一行设置ID

1 个答案: