如何为一列的每一行设置id答案

【问题标题】：How to Set id for each row of a column如何为一列的每一行设置id
【发布时间】：2018-01-05 17:22:36
【问题描述】：

这是我表中的行之一。

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

如果有任何更正，请告诉我。

【问题讨论】：

你用的是什么库？
你能告诉我创建<td>的循环吗？
是的，我正在添加它。
你使用的是php代码foreach吗？如果是，我认为代码不会显示您在图片中显示的结果。
是的，我正在检索 select 的数据。但它是获得的输出。

标签： javascript html select

【解决方案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

【讨论】：