Jquery資料表，編輯單列值并將值發送到后端進行更新-有解無憂

我正在處理資料表，我想更改單元格值并將其發送到后端。我能夠創建帶有可編輯欄位的資料表。我可以像示例代碼中提供的那樣分配靜態值“new”。我的問題是如何將用戶輸入的值分配給可編輯列“名稱”。我想顯示用戶輸入的值并將用戶輸入的所有值發送到后端以保存在資料庫中。

帶有代碼場景的 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  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..... 
}

謝謝你的時間喬丹

uj5u.com熱心網友回復：

單擊保存按鈕時，您希望獲取資料中的所有輸入值進行保存，對嗎？你可以這樣試試：

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  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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/379032.html

標籤：javascript html 查询数据表 jquery插件

上一篇：每列點擊搜索的資料表

下一篇：根據推薦鏈接自動選擇聯系表7中的欄位