如何在table中传递隐藏字段并通过jQuery点击tr获取值，可传整段JSON吗？

你当前无法获取隐藏字段的核心原因是：<tr> 标签的合法子元素只能是 <td>/<th>，你直接将 <input> 写在 <tr> 下不符合HTML规范，Datatable初始化时只会提取所有 <td> 内的内容作为行数据，因此隐藏输入框的值不会被纳入Datatable的数据集。

针对你的需求有两种常用实现方案，你提到的「整段JSON作为单个字段传递」是可行性最高、维护成本最低的方案：

方案1：行data属性存整段JSON（推荐） #

直接将整条交易数据序列化为JSON后存到<tr>的自定义data属性中，无需修改Datatable配置，后续新增字段也不用调整表格结构。

第一步：修改JSP表格代码 #

删除<tr>下的三个隐藏<input>，给<tr>新增data-transaction属性：

<c:forEach items="${transactionList}" var="transactionInfo" varStatus="transactionIndex">
  <tr 
    class="cursor-pointer" 
    <!-- 转义JSON避免引号和HTML冲突，用fn:escapeXml处理特殊字符 -->
    data-transaction='${fn:escapeXml(JSON.toJSONString(transactionInfo))}'
  >
    <td>${transactionIndex.index + 1}</td>
    <td>${transactionInfo.desc}</td>
  </tr>
</c:forEach>

注：如果项目没有引入JSON序列化工具，也可以手动拼接JSON字符串，注意做好引号转义即可，同时注意uniqueId字段的拼写要和实体类保持一致，避免取值失败。

第二步：修改点击事件取值逻辑 #

$('#result tbody').on('click', 'tr', function () {
  // jQuery的data方法会自动将JSON字符串转为JS对象
  const transactionInfo = $(this).data('transaction');
  console.log("完整交易数据：", transactionInfo);
  // 直接取隐藏字段即可
  console.log("id：", transactionInfo.uniqueId.id);
  console.log("value：", transactionInfo.uniqueId.value);
  console.log("time：", transactionInfo.uniqueId.time);
});

方案2：Datatable隐藏列实现 #

如果你需要通过Datatable.row(this).data()统一获取所有行数据，可以用隐藏列承载隐藏字段：

第一步：调整表格结构，新增隐藏列对应列 #

<table id="result" >
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
      <!-- 新增三个隐藏列的表头 -->
      <td>id</td>
      <td>value</td>
      <td>time</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>
        <!-- 隐藏字段放到对应td中 -->
        <td>${transactionInfo.uniqueId.Id}</td>
        <td>${transactionInfo.uniqueId.value}</td>
        <td>${transactionInfo.uniqueId.time}</td>
      </tr>
    </c:forEach>
  </tbody>
</table>

第二步：Datatable初始化时配置列隐藏 #

$('#result').DataTable({
  "columnDefs": [
    {
      "targets": [2,3,4], // 对应三个隐藏列的索引，从0开始计数
      "visible": false, // 设为不可见
      "searchable": false // 禁止搜索这些列
    }
  ]
});

配置完成后你原来的点击事件即可正常通过row(this).data()拿到索引为2、3、4的隐藏字段值。

内容的提问来源于stack exchange，提问作者user630209