Question

我正在构建一个laravel应用程序，其中我有一个jquery数据表，其中包含一些ajax数据并且有一些输入表单。表列由datatable列选项生成。问题是，当我发布数据时，它只获取最后一行，因为每个输入的名称都是相同的。我试图使用jquery .attr（）和.prop（）更改name属性，但它没有工作。任何帮助表示赞赏。

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);
     });

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

2 个答案: