如何从每个数据表行下拉列表中获取值

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