我正在使用数据表。问题是我需要从每一行的下拉列表中获取所有值。数据表有“公司”列，用户需要从下拉列表中选择值。现在我可以使用下面的代码获取 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);
});
如何从下拉列表中获取所有数据表页面的选定值？
【问题讨论】：
标签： javascript jquery datatables
我会以稍微不同的方式处理这个问题。
你需要的部分数据可以从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 代码中使用了一个类（值 = 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"
}
]
【讨论】：
<select> 字段或<input> 字段或复选框等...在这些情况下，任何由用户在底层 DataTables 对象 (JavaScript) 中不存在 - 它仅存在于页面 DOM 中。当然，您可以在创建 DataTable 时为此类字段提供初始值（当它首次显示时）。您可以还添加将检测用户输入并将该输入保存到 DataTable 的事件侦听器 - 但这是一个完全不同的问题。