这是我的 Html 代码块，我从 rest api 加载了表数据，我想从使用复选框选择的每一行 td 数据属性中获取数组对象
<tr>
<th scope='row' class='product-item-check'><input class='product-item-checkbox' type='checkbox' name='select-product' value='"+obj.pk_productId+"'></th>
<td data-th_name='"+th_cell+"' data-td_name='"+td_cell+"' >" + td_cell + "</td>
</tr>
我的示例代码
$(document).on('click','.product-item-checkbox',function(){
var thName;
var tdName;
var td;
var checkedValue = $('.product-item-checkbox:checked').closest('tr').find('td').map(function(i, v){
thName = $(this).data('th_name');
tdName = $(this).data('td_name');
td = {
"thead":thName,
"tdata":tdName
}
return td;
}).get();
console.log(checkedValue);
});
当前输出
](/image/Rynag.png)
预期输出
[
{
"pk_productId": 1940690,
"productCode": "abcmkk",
"productDescription": "Sample Description",
"callout": 12qwww,
"product_type": "woven",
"product_image": null,
"status": 1234,
},
{
"pk_productId": 1940690,
"productCode": "abcmkk",
"productDescription": "Sample Description",
"callout": 12qwww,
"product_type": "woven",
"product_image": null,
"status": 1234,
}
]
最佳答案
如果我的理解正确，您是想获取 JSON 格式的选定行？
虽然这不是“同类”演示(就所使用的数据而言)，但想法/逻辑保持不变……像这样应该可以解决问题:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head>
<table id="my-table"></table>
<h1 id="selected-items-title"></h1>
<pre id="selected-items"></pre>
<script>
/**
* GLOBAL DATA
*/
let GLOBALS = {
apiData: [ // PRETEND YOU ARE GETTING THIS DATA FROM A REST API
{ company: "Alfreds Futterkiste", name: "Maria Anders", country: "Germany" },
{ company: "Centro comercial Moctezuma", name: "Francisco Chang", country: "Mexico" },
{ company: "Ernst Handel", name: "Roland Mendel", country: "Austria" }
],
tableData: "<tr><th></th><th>Company</th><th>Name</th><th>Country</th></tr>",
}
/**
* DOCUMENT READY
*/
$(document).ready(function () {
// Add our API data to our table on load
GLOBALS.apiData.forEach(item => {
GLOBALS.tableData += `
<tr>
<td><input class='product-item-checkbox' type='checkbox' name='select-product'/></td>
<td data-th_name="company" data-td_name="${item.company}">${item.company}</td>
<td data-th_name="name" data-td_name="${item.name}">${item.name}</td>
<td data-th_name="country" data-td_name="${item.country}">${item.country}</td>
</tr>`;
});
$("#my-table").html(GLOBALS.tableData);
});
/**
* EVENT .product-item-checkbox CLICK
*/
$(document).on('click', '.product-item-checkbox', function () {
// Finds all checked checkboxes and adds contents to array
let selectedData = [];
$('.product-item-checkbox:checkbox:checked').each((index, checkbox) => {
let thName, tdName;
let td = {};
$(checkbox).closest('tr').find('td').each(function (i, v) {
thName = $(this).data('th_name');
tdName = $(this).data('td_name');
if (thName !== undefined) {
td[thName] = tdName;
}
}).get();
if (td) selectedData[selectedData.length] = td
});
if (selectedData.length > 0) {
$("#selected-items-title").html("Selected Items:");
$("#selected-items").show();
$("#selected-items").html(JSON.stringify(selectedData, null, 2));
console.log(selectedData);
} else {
$("#selected-items-title").html("");
$("#selected-items").hide();
}
});
</script>关于javascript - 如何将每个 td 数据属性的选定复选框表行获取到数组对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59273102/