如何在DataTables中获取表格单元格不含HTML的纯文本值

嘿，这个问题我之前也踩过坑！DataTables的cell().data()默认返回的是你初始化表格时传入的原始数据——如果原始数据里带HTML标签，那自然会把标签一起返回给你。要拿到纯文本，有几个简单实用的办法：

方法一：直接从点击的DOM元素取文本 #

既然你已经在点击事件里拿到了当前的<td>元素（也就是this），完全可以跳过DataTables API，直接用jQuery的text()方法获取纯文本：

var table = $('#table-list-users').DataTable();
$('#table-list-users tbody').on('click', 'td', function(){
  // 用$(this).text()直接取单元格纯文本，trim()可选，用来去除前后多余空格
  someValue = $(this).text().trim();
  console.log(someValue);
})

这个方法最直接高效，毕竟你已经拿到了目标DOM元素，没必要绕DataTables的API。

方法二：通过DataTables API获取DOM节点再取文本 #

如果你需要先借助DataTables的API做一些额外操作（比如确认单元格的行列位置），可以先拿到单元格对应的DOM节点，再提取文本：

var table = $('#table-list-users').DataTable();
$('#table-list-users tbody').on('click', 'td', function(){
  // 先通过cell().node()获取单元格的DOM元素
  var cellDom = table.cell(this).node();
  someValue = $(cellDom).text().trim();
  console.log(someValue);
})

方法三：从源头处理——初始化表格时配置渲染规则 #

如果你的表格数据是从后端或数据源加载的，还可以在初始化DataTables时，给对应列配置render函数，让DataTables在不同场景返回不同内容：

var table = $('#table-list-users').DataTable({
  columns: [
    // 其他列的配置...
    {
      data: 'yourFieldName', // 替换成你的数据源字段名
      render: function(data, type, row) {
        // 当用于页面显示时，返回带HTML的原始数据
        if (type === 'display') {
          return data;
        }
        // 当用于API获取、排序、筛选时，返回纯文本
        return $(data).text().trim();
      }
    }
    // 其他列的配置...
  ]
});

这样配置后，你原来的table.cell(this).data()就能直接拿到纯文本了，不需要再额外处理。

小提示：trim()方法是可选的，根据你的实际需求决定是否保留——如果单元格文本前后有多余的空格，用它可以快速清理。

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