Question

我使用Laravel刀片模板创建了这个表单，并使用jQuery使其动态化。现在我可以使用其中的所有输入字段填充表行。现在我正在尝试将ajax数据输入到第一列中更改选择值的那些字段中。它仅适用于第一行，因为每个输入字段没有唯一的ID。请帮我解决这个问题。

以下代码在刀片模板上使用的代码

<tr id="1">
        <td>
            {!! Form::select('item_id[]', ['' => 'Select an item'] + $items, null, array('class' => 'form-control', 'id' => 'itemId', 'required')) !!}
        </td>
        <td>
            {!! Form::text('item_description[]', null, ['class' => 'form-control', 'id' => 'item_description', 'placeholder' => 'Not Required | Optional']) !!}
        </td>
        <td>
            {!! Form::text('units[]', null, ['class' => 'form-control', 'placeholder' => 'Add Units', 'required']) !!}
        </td>
        <td>
            {!! Form::text('rate[]', null, ['class' => 'form-control', 'id' => 'rate', 'placeholder' => 'Add Rate', 'required']) !!}
        </td>
        <td>
            {!! Form::text('amount[]', null, ['class' => 'form-control', 'placeholder' => 'Add Hrs and Rate', 'id' => 'amount']) !!}
        </td>
        <td class="text-center actions"><a id="delete-row" onclick="delTableRow($('#dynamic-tbl'));" href="#"><i class="fa fa-times"></i></a></td>
</tr>

以下代码用于填充具有相同输入字段的更多行

/*
 * Dynamic table row adding and deleting functions
 */
function addTableRow(jQtable){
    var rowId = parseInt($('#dynamic-tbl tbody tr:last').attr('id'));
    ++rowId;
   // console.log(rowId);
    jQtable.each(function(){
        var tds = '<tr id='+rowId+'>';
        jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
        tds += '</tr>';
        if($('tbody', this).length > 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}

在这里$(this).html()复制上一行的内部html。我正在尝试为每个输入字段添加唯一ID。

以及以下用于使用ajax获取数据的代码

/*
 * Estimate Item Description Ajax function
 */
$('#dynamic-tbl #itemId').change(function(e) {
    //console.log(e);
    var item_id = e.target.value;
    //ajax
    $.get('/ajax-item?item_id=' + item_id, function(data){
        //success data
        //console.log(data);
        $('#item_description').empty();
        $('#rate').empty();
        $.each(data, function(index, itemObj){
            $('#item_description').val(itemObj.name);
            $('#rate').val(itemObj.sale_price);
        });
    });
});

Answer 1

您可以使用jQuery UI中的uniqueId()方法。它将应用于一组匹配的元素，因此您只需将其应用于order by的输入字段：

#dynamic-tbl

如果您不想使用jquery，您还可以编写自己的函数来创建唯一的ID：

$('#dynamic-tbl input').uniqueId()

如果你希望id只有一个增加的数字，你也可以修改你的addTableRow函数来改变id，然后再将html复制到下一行：

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}

jQuery如何向动态表单输入字段添加唯一ID

1 个答案: