Jquery 数据表，编辑单列值并将值发送到后端进行更新答案

【问题标题】：Jquery Data Table , Edit single column value and send the value to back end for updateJquery 数据表，编辑单列值并将值发送到后端进行更新
【发布时间】：2022-01-14 18:46:28
【问题描述】：

我正在处理数据表，我想更改单元格值并将其发送到后端。我能够创建带有可编辑字段的数据表。正如我在示例代码中提供的那样，我能够分配静态值“新”。我的问题是如何将用户输入的值分配给可编辑列“名称”。我想显示用户输入的值并将用户输入的所有值发送到后端保存在数据库中。

带有代码场景的 JsFiddle 链接：JSFIDDLE

HTML代码：

 <html>
<head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<body>
<button onclick="saveDatatoBackEnd()">save</button>
<table id="example" class="display" width="100%"></table>
</body>

JavaScript：

var dataSet = [
    [ "1","Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
      [ "2","Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
];
 
function prepareEditableOrder(data, type, row, meta){
     return '<input class="form-control" id="'+row.Id+'" type="text"  value = ' + data + ' >';
} 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Id",},
            { title: "Name" ,render:prepareEditableOrder},
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
    
    $('#example').on( 'click', 'td', function () {
        // how to display value in datatable entered by user in column name and store it in data table so I can send it to back end 
        var table = $(this).closest('table').DataTable();
        table.cell(this).data("new"); // this is static value , I need value entered by user                        
    });
} );

function saveDatatoBackEnd(){
//Need to send change data to server side..... 
}

感谢您的宝贵时间约旦

【问题讨论】：

你提到了这个link吗？
这是高级扩展。

标签： javascript html jquery datatables jquery-plugins

【解决方案1】：

单击保存按钮时，您希望获取数据中的所有输入值进行保存，对吗？你可以这样尝试：

var dataSet = [
        ["1", "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
        ["2", "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
    ];

function prepareEditableOrder(data, type, row, meta) {
    return '<input class="form-control cell-datatable" id="' + row.Id + '" type="text"  value = ' + data + ' >';
}

$(document).ready(function () {
    $('#example').DataTable({
        data: dataSet,
        columns: [
            {title: "Id",},
            {title: "Name", render: prepareEditableOrder},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary"}
        ]
    });

    $('#example').on('click', 'td', function () {
        // how to add new value to cell and store it in data table so I can send it to back end
        var table = $(this).closest('table').DataTable();
        // table.cell(this).data("new"); // this is static value , I need value entered by user
    });
});

$('#btn-save').click(function () {
    let data = [];
    $.each($('input.cell-datatable'), function (index, value) {
        data.push($(value).val())
    })
    alert('Data to save: ' + data)
    saveDatatoBackEnd(data)
})

function saveDatatoBackEnd(data) {
    //Need to send change data to server side.....
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">



<button id="btn-save">save</button>
<table id="example" class="display"></table>

【讨论】：

谢谢 .. 想不出我可以添加类并将其用作选择器。很好的帮助。