layui table新加了一行无法循环

在Layui table中新加一行无法循环，可能是由于在添加新行时没有正确设置行内的内容。在Layui table中添加新行需要通过创建一个新的tr元素，并通过设置td元素的内容来填充新行的数据。

首先，需要在table的tbody标签中添加一个id或class（如id="tableBody"）来标识tbody元素。

然后，使用JavaScript或jQuery等方式获取到tbody元素，并创建一个新的tr元素，可以使用createElement方法或者通过jQuery的append方法进行添加。

接下来，根据表格的列数，循环添加td元素，并将对应的数据填充到td中，可使用innerHTML或text方法设置td元素的内容。

最后，将新创建的tr元素添加到tbody中，可以使用appendChild方法或者通过jQuery的append方法添加。

需要注意的是，在循环中需要根据数据源的长度来确定需要添加的行数和每行的数据，遍历数据源将数据填充到对应的td中。

如果以上步骤都已正确执行，即可实现循环添加新行的功能。如若需要进一步排查问题所在，可以检查代码中是否存在语法错误或逻辑错误，以及确认数据源是否正确传入等。

相关问题

layui table新增一列

### 回答1：
要在Layui表格中新增一列，您需要执行以下步骤：

1. 在HTML中的表格标签中添加一个新的<th>标签，用于显示表头。例如，如果您要添加一个名为“新列”的列，则应添加以下内容：

<thead>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>新列</th>
  </tr>
</thead>

2. 在JavaScript中使用Layui的API来向表格中的每一行添加该列的内容。例如，您可以使用Layui的each函数来遍历每一行，并使用DOM操作将新的单元格添加到该行中。以下是一个示例代码：

layui.use('table', function(){
  var table = layui.table;
  
  table.on('toolbar(test)', function(obj){
    if(obj.event === 'addCol'){
      // 遍历表格中的每一行
      table.each(function (index, row) {
          // 在每一行中添加一个新的单元格
          var td = $('<td>').text('新列的内容');
          $(row.tr).append(td);
      });
    }
  });
});

通过执行上述步骤，您应该能够成功地向Layui表格中添加一列。

### 回答2：
在layui table中新增一列可以通过修改源代码或者使用一些扩展方法来实现。

方法一：修改源代码

1. 找到layui.table源代码中的render方法。
2. 在render方法中找到th标签的循环遍历部分，新增一个th标签即可新增一列。
3. 在tbody标签的循环遍历部分，给每个tr标签新增一个td标签即可。

方法二：使用扩展方法

1. 引入一些扩展方法，如layui_table_extend.js。
2. 在js或者HTML中使用扩展方法来新增一列，例如：

table.render({
  elem: '#demo',
  url: '/api/table', //数据接口
  cols: [
    [
      { field: 'id', title: 'ID', width: 80, sort: true },
      { field: 'username', title: '用户名', width: 80 },
      { field: 'sex', title: '性别', width: 80 },
      { title: '新增一列', templet: '#newColumn', width: 120 } //新增一列
    ]
  ]
});

//新增一列的模板
<script type="text/html" id="newColumn">
  <div>{{d.newColumn}}</div>
</script>

以上是两种常用的方法，根据实际需要选择合适的方法来新增一列。

### 回答3：
在layui table中新增一列，可以通过在表格数据源中添加一列的方式来实现。

首先，在定义表格数据源时，需要给每一行的数据对象添加新增的列属性，例如：

var data = [
  {id: 1, name: '张三', age: 20, gender: '男', newColumn: '新数据1'},
  {id: 2, name: '李四', age: 25, gender: '女', newColumn: '新数据2'},
  {id: 3, name: '王五', age: 30, gender: '男', newColumn: '新数据3'}
];

其中，`newColumn`是新增列的属性名，每行数据中对应的值就是该列的数据。

然后，在layui table的配置项中，需要添加对新增列的描述，例如：

layui.use(['table', 'form'], function(){
  var table = layui.table;
    
  table.render({
    elem: '#demo',
    data: data,
    cols: [
      [
        {field: 'id', title: 'ID'},
        {field: 'name', title: '姓名'},
        {field: 'age', title: '年龄'},
        {field: 'gender', title: '性别'},
        {field: 'newColumn', title: '新增列'}
      ]
    ]
  });
});

其中，`cols`配置项中的`{field: 'newColumn', title: '新增列'}`表示新增列的属性和标题。

完成以上操作后，即可在layui table中显示新增的一列。

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` 样式类，你可以在样式文件中定义该样式类来更改单元格的颜色。