layui 动态table 单元格点击获取点击元素内容代码

你可以通过以下代码来实现：

// 获取 table 元素
var table = layui.table;

// 监听单元格事件
table.on('cell(test)', function(obj){
  // 获取单元格数据
  var data = obj.data;
  // 获取单元格字段
  var field = obj.field;
  // 获取单元格原始 DOM 元素
  var elem = obj.elem;
  // 获取单元格元素内容
  var content = elem.textContent;

  console.log('单元格数据：', data);
  console.log('单元格字段：', field);
  console.log('单元格元素：', elem);
  console.log('单元格内容：', content);
});

其中，`test` 是你的 table 元素的 lay-filter 属性值，需要根据你的实际情况进行修改。此外，还需要引入 layui 框架。

相关问题

layui表格的单元格没有id怎么使用blur()方法

由于 layui 表格的单元格没有 id，所以无法直接使用 `blur()` 方法来绑定单元格的失焦事件。不过，你可以通过 jQuery 的事件委托机制来实现这个功能。

具体做法是，给表格的父元素绑定 `blur()` 事件，并使用 `event.target` 来获取触发事件的元素，然后根据元素的类名或其他属性来判断元素是否为单元格，最后根据单元格的行列索引进行操作。

示例代码如下：

// 绑定表格父元素的 blur 事件
$('#table-container').on('blur', '.layui-table-cell', function(event) {
  var $cell = $(event.target);
  var rowIndex = $cell.parent().data('index');
  var colIndex = $cell.data('field');
  var value = $cell.text().trim();

  // 处理单元格失焦事件，例如保存修改后的数据
  // ...

  console.log('失焦事件，行索引：', rowIndex, '列索引：', colIndex, '值：', value);
});

这里假设表格的父元素的 ID 为 `table-container`，监听该元素的 `blur()` 事件，然后在事件处理函数中获取触发事件的元素及其行列索引，最后根据需要进行相应的操作。

注意，这里使用了事件委托机制，将事件绑定到父元素上，而不是直接绑定到每个单元格上，这样可以提高性能，减少事件绑定的数量。

Layui table排序后单元格颜色变了

Layui table 的排序功能是通过改变表格的 DOM 结构来实现的，因此在排序后单元格的颜色可能会改变，这可能是因为样式类没有正确地被更新。你可以尝试在 layui 的表格渲染时，通过监听 `sort` 事件来重新渲染表格，例如：

table.render({
  elem: '#test',
  url: '/demo/table/user/',
  page: true,
  cols: [[ //表头
    {field: 'id', title: 'ID', width:80, sort: true},
    {field: 'username', title: '用户名', width:80},
    {field: 'email', title: '邮箱', width: 150},
    {field: 'sex', title: '性别', width:80, sort: true},
    {field: 'city', title: '城市', width:100},
    {field: 'sign', title: '签名', width: 200},
    {field: 'experience', title: '积分', width: 80, sort: true},
    {field: 'score', title: '评分', width: 80, sort: true},
    {field: 'classify', title: '职业', width: 100},
    {field: 'wealth', title: '财富', width: 135, sort: true},
  ]],
  done: function(res, curr, count){
    // 监听表格排序事件
    table.on('sort(test)', function(obj){
      // 重新渲染表格
      table.render();
    });
  }
});

如果以上方法不起作用，你可以尝试手动更新样式类来解决问题。例如，在样式文件中为被排序的单元格添加一个样式类，然后在排序后通过 JavaScript 手动为这些单元格添加该样式类。具体实现方法如下：

.sorted {
  background-color: #f2f2f2;
}

table.on('sort(test)', function(obj){
  // 获取排序列的索引值
  var index = obj.field;
  // 获取排序方式
  var sort = obj.type;
  // 获取表格行元素
  var trs = $('#test').next().find('tr');
  // 遍历表格行
  trs.each(function(){
    // 获取当前行单元格元素
    var tds = $(this).children('td');
    // 获取排序列的单元格
    var td = tds.eq(index);
    // 如果当前行是表头，则退出循环
    if (td.length === 0) {
      return false;
    }
    // 如果当前列被排序，则添加样式类
    if (td.attr('data-sort') === sort) {
      td.addClass('sorted');
    } else {
      td.removeClass('sorted');
    }
  });
});

以上代码将在排序后为被排序列添加 `sorted` 样式类，你可以在样式文件中定义该样式类来更改单元格的颜色。