更改 jquery 数据表单元格中的输入名称属性

Question

我正在构建一个 laravel 应用程序，其中我有一个 jquery 数据表，其中填充了一些 ajax 数据并有一些输入表单。表列由数据表列选项生成。问题是当我发布数据时它只得到最后一行，因为每个输入的名称都是相同的。我尝试使用 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']]
    });

Answer 1

您应该能够使用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']]
});

Answer 2

这将更改（索引）所有 td 上的名称：

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