如何传递表中的隐藏字段,并在点击按钮时返回jquery中的值



这是html

<table id="result" >
<thead>
<tr>
<td >1</td>
<td  >2</td>
</tr>
</thead>
<tbody id="sDiv">
<c:forEach items="${transactionList}" var="transactionInfo" varStatus="transactionIndex">
<tr class="cursor-pointer" >
<td >${transactionIndex.index + 1}</td>
<td >${transactionInfo.desc}</td>
<input type="hidden" value="${transactionInfo.uniqueId.Id}"/>
<input type="hidden" value="${transactionInfo.uniqueId.value}"/>
<input type="hidden" value="${transactionInfo.uniqueId.time}"/>
</tr>
</c:forEach>
</tbody>
</table>

where transactionList,

[{
"desc": "",
"unidueId": {
"id": "",
"value": "",
"time": ""
}
},
{
"desc": "",
"unidueId": {
"id": "",
"value": "",
"time": ""
}
}
]

这是行点击函数,我用数据表来初始化。但是初始加载使用的是普通的表数据。所以DataTable()是按预期工作,我得到行数据。行数据只包含td值,不包含隐藏字段。

$('#result tbody').on('click', 'tr', function () {
var data = $('#result').DataTable().row( this ).data();
console.log("data :"+JSON.stringify(data));
} );   

这里我如何将隐藏的数据从jsp传递到javascript表中。从jquery中获取点击函数的数据

优先解决方案我可以传递整个json作为一个字段吗?

试试下面的代码。工作小提琴链接

<table id="result" >
<thead>
<tr>
<td >1</td>
<td  >2</td>
</tr>
</thead>
<tbody id="sDiv">

<tr class="cursor-pointer" >
<td >${transactionIndex.index + 1}</td>
<td >${transactionInfo.desc}</td>
<input type="hidden" name="id" value="10"/>
<input type="hidden" name="value" value="100"/>
<input type="hidden" name="date" value="2021-08-25"/>
</tr>
</tbody>
</table>

Jquery

var dataval= [];
$('#result tbody').on('click', 'tr', function () {
var data = {};
data.id= $(this).closest("tr").find('[name="id"]').val();
data.value= $(this).closest("tr").find('[name="value"]').val();
data.date= $(this).closest("tr").find('[name="date"]').val();
dataval.push(data);
console.log("data :"+JSON.stringify(dataval));
});   

最新更新