如何從每個數據表行下拉列表中獲取值

Question

我正在使用數據表。 問題是我需要從每一行的下拉列表中獲取所有值。 數據表有列“公司”，用戶需要從下拉列表中選擇值。現在我可以使用下面的代碼獲取Citizen_ID和Tel 的每一行的值。

var rowData = table.rows().data(); 
var dataArr = [];
$.each($(rowData), function(key,value){ //data                     
        let tempObj = {
        Citizen_id: value["Citizen_ID"],
        Tel: value["Tel"]
       }
  dataArr.push(tempObj);
});

如何從所有數據表頁面的下拉列表中獲取選定值？

Answer 1

我會以稍微不同的方式來解決這個問題。

您需要的一些數據可以從DataTable 中訪問，但是每行下拉列表中的選定值僅存在於DOM 中，因此您需要相關的DOM 節點來訪問該數據。

因此，我會在開始時填充以下兩個變量：

var rowData = table.rows().data().toArray(); 
var rowNodes = table.rows().nodes().toArray();

這兩個都是使用 DataTables API 調用填充的，因此整個表都被處理。

這為您提供了兩個數組 - 一個包含每一行的 DataTables 數據對象，另一個包含 DOM 節點。

然后您可以使用傳統的for循環並行迭代數組，並提取您需要的特定數據。

對於下拉節點，您可以使用 jQuery 選擇器：

let selectedCompany = $(rowNodes[i]).find("select.company option:selected").text();

我在select的 HTML 代碼中使用了一個類 (value = company )，以防萬一在一行中有多個不同的選擇。

這是整體方法的演示：

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> </head> <body> <div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:100%"> </table> <br> <button id="data_btn" type="button">Get Data</button> </div> <script> var dataSet = [ { "id": "123", "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "id": "456", "name": "Donna Snider", "position": "Customer Support", "salary": "$112,000", "start_date": "2011/01/25", "office": "New York", "extn": "4226" } ]; $(document).ready(function() { var table = $('#example').DataTable( { lengthMenu: [ [2, -1] , [2, "All"] ], data: dataSet, columns: [ { title: "ID", data: "id" }, { title: "Name", data: "name" }, { title: "Office", data: "office" }, { title: "Position", data: "position" }, { title: "Company", defaultContent: '', render: function ( data, type, row, meta ) { if (type === 'display') { return '<select class="company">' + '<option value="Google">Google</option>' + '<option value="Microsoft">Microsoft</option>' + '<option value="Amazon">Amazon</option></select>'; } else { return data; } } }, { title: "Start date", data: "start_date" }, { title: "Extn.", data: "extn" }, { title: "Salary", data: "salary" } ] } ); $("#data_btn").on( "click", function() { var rowData = table.rows().data().toArray(); var rowNodes = table.rows().nodes().toArray(); var dataArr = []; for (i = 0; i < rowData.length; i++) { let selectedCompany = $(rowNodes[i]).find("select.company option:selected").text(); let tempObj = { id: rowData[i].id, name: rowData[i].name, company: selectedCompany } dataArr.push(tempObj); } console.log( dataArr ); }); } ); </script> </body> </html>

運行演示時，首先在每個下拉列表中選擇一個“公司”值。

然后單擊“獲取數據”按鈕。

生成的對象將類似於以下內容：

[
  {
    "id": "123",
    "name": "Tiger Nixon",
    "company": "Amazon"
  },
  {
    "id": "456",
    "name": "Donna Snider",
    "company": "Microsoft"
  }
]

如何從每個數據表行下拉列表中獲取值

問題描述

1 個解決方案

解決方案1
0 2021-07-07 17:28:45

如何從每個數據表行下拉列表中獲取值

問題描述

1 個解決方案

解決方案1 0 2021-07-07 17:28:45

解決方案1
0 2021-07-07 17:28:45