更改jquery数据表单元格中的Input name属性 - changing the Input name attribute in a jquery datatable cell

我正在构建一个laravel应用程序，我有一个jquery数据表填充了一些ajax数据，并有一些输入表单。表列由datatable列选项生成。问题是，当我发布数据时，它只得到最后一行，因为每个输入的名称是相同的。我试图改变使用jquery的名称属性。attr()和。prop()，但它没有工作。任何帮助都是感激的。

PS:如果你知道任何其他方式传递数据从表到数据库在laravel告诉我。

编辑1

$(document).ready(function(){
    $( "tr" ).each(function(index) {
        $("#id").attr('name',function(){
            return "text"+index;
        });
     });
});

编辑2

var table = $('#monthly_table').DataTable({
        "paging": true,
        "dom": "fr<'clear'>Ttip",
        "ajax": "../ajax/data/objects.txt",
        "tableTools": {/*buttons */},
        "columns": [
            { "data": "kpi" },
            { "data": "workload" },
            {
                "className": '',
                "orderable": false,
                "defaultContent": '<input  class="form-control month" type="month" />'
            },
            {
                "className": '',
                "orderable": false,
                "defaultContent": '<input id="value"  class="form-control" type="number" />'
            },
            {
                "className": '',
                "orderable": false,
                "defaultContent": '<input id="comment" class="form-control" type="text" />'
            },
            {
                "className": 'details-control',
                "orderable": false,
                "defaultContent": '<a href="#" class="fa fa-info-circle"/>'
            },
            {
                "className": 'details-controlss',
                "orderable": false,
                "defaultContent": '<a href="#" class="fa fa-area-chart"/>'
            },
            {
                "className": 'details-controls',
                "orderable": false,
                "defaultContent": '<a href="#" class="fa fa-table"/>'
            }
        ],
        "order": [[1, 'asc']]
    });

您应该能够使用createdRow回调来更新每行上的数据。此外，您的输入没有名称，因此我添加了默认名称(并删除了id)，这将在createdRow回调中更新:

var table = $('#monthly_table').DataTable({
    "paging": true,
    "dom": "fr<'clear'>Ttip",
    "ajax": "../ajax/data/objects.txt",
    "tableTools": {/*buttons */},
    "columns": [
        { "data": "kpi" },
        { "data": "workload" },
        {
            "className": '',
            "orderable": false,
            "defaultContent": '<input name="month" class="form-control month" type="month" />'
        },
        {
            "className": '',
            "orderable": false,
            "defaultContent": '<input name="value" class="form-control" type="number" />'
        },
        {
            "className": '',
            "orderable": false,
            "defaultContent": '<input name="comment" class="form-control" type="text" />'
        },
        {
            "className": 'details-control',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-info-circle"/>'
        },
        {
            "className": 'details-controlss',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-area-chart"/>'
        },
        {
            "className": 'details-controls',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-table"/>'
        }
    ],
    "order": [[1, 'asc']],
    "createdRow": function(row, data, dataIndex) {
        $(row).find('input').each(index, element) {
            var $element = $(element);
            $element.attr('name', $element.attr('name') + '-' + dataIndex);  
        }
    }
});

另一个选项是使用data键的函数，而不是defaultContent键。然后，您不需要回调来更新名称，因为它们已经使用行索引生成了。

var table = $('#monthly_table').DataTable({
    "paging": true,
    "dom": "fr<'clear'>Ttip",
    "ajax": "../ajax/data/objects.txt",
    "tableTools": {/*buttons */},
    "columns": [
        { "data": "kpi" },
        { "data": "workload" },
        {
            "className": '',
            "orderable": false,
            "data": function (row, type, val, meta) {
                return '<input name="month-' + meta.row + '" class="form-control month" type="month" />'
            }
        },
        {
            "className": '',
            "orderable": false,
            "data": function (row, type, val, meta) {
                return '<input name="value-' + meta.row + '" class="form-control" type="number" />'
            }
        },
        {
            "className": '',
            "orderable": false,
            "data": function (row, type, val, meta) {
                return '<input name="comment-' + meta.row + '" class="form-control" type="text" />'
            }
        },
        {
            "className": 'details-control',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-info-circle"/>'
        },
        {
            "className": 'details-controlss',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-area-chart"/>'
        },
        {
            "className": 'details-controls',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-table"/>'
        }
    ],
    "order": [[1, 'asc']]
});

最后，您的第三个选择是仅将名称作为数组。现在，在您的服务器端处理中，您的月份、值和注释输入将是包含所有值的数组。

var table = $('#monthly_table').DataTable({
    "paging": true,
    "dom": "fr<'clear'>Ttip",
    "ajax": "../ajax/data/objects.txt",
    "tableTools": {/*buttons */},
    "columns": [
        { "data": "kpi" },
        { "data": "workload" },
        {
            "className": '',
            "orderable": false,
            "defaultContent": '<input name="month[]" class="form-control month" type="month" />'
        },
        {
            "className": '',
            "orderable": false,
            "defaultContent": '<input name="value[]" class="form-control" type="number" />'
        },
        {
            "className": '',
            "orderable": false,
            "defaultContent": '<input name="comment[]" class="form-control" type="text" />'
        },
        {
            "className": 'details-control',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-info-circle"/>'
        },
        {
            "className": 'details-controlss',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-area-chart"/>'
        },
        {
            "className": 'details-controls',
            "orderable": false,
            "defaultContent": '<a href="#" class="fa fa-table"/>'
        }
    ],
    "order": [[1, 'asc']]
});

这将改变(索引)所有td的名称:

    $( "td" ).each(function(index, element) {
        var $ele = $(element),
            newName = $ele.attr('name')+index;
        $ele.attr('name',newName);
     });