如何从DataTable选中行的input元素中提取value值？

开发者阿泽

2026-7-27

如何从DataTable选中行的input HTML字符串中提取value属性值？

你可以通过解析HTML字符串的方式提取input的value值，以下是几种可行方案：

方案1：使用jQuery解析（最简便）

利用jQuery将HTML字符串转换为DOM对象，直接调用val()方法获取value：

var selectedRows = $.map(table.rows('.selected').data(), function(item) {
  return $(item[0]).val();
});

方案2：原生DOM解析（不依赖jQuery）

创建临时DOM元素承载HTML字符串，再通过原生方法获取value：

var selectedRows = $.map(table.rows('.selected').data(), function(item) {
  const tempEl = document.createElement('div');
  tempEl.innerHTML = item[0];
  return tempEl.querySelector('input[name="RowId"]').value;
});

方案3：正则表达式（适合固定格式场景）

如果能确保input的HTML格式稳定，也可以用正则匹配value值：

var selectedRows = $.map(table.rows('.selected').data(), function(item) {
  const valueMatch = item[0].match(/value="(\d+)"/);
  return valueMatch ? valueMatch[1] : null;
});

完整修改后的代码示例

var table = $('#tbl').DataTable();

$('#tbl tbody').on('click', 'tr', function() {
  $(this).toggleClass('selected');
});

$('#button').click(function(e) {
  e.preventDefault();

  var selectedRows = $.map(table.rows('.selected').data(), function(item) {
    return $(item[0]).val();
  });

  console.log(selectedRows); // 输出结果为["1", "2", "3"...]
  alert(table.rows('.selected').data().length + ' row(s) selected');
});