jQuery dataTables row.add 根据内容在外部 td 上具有不同的类

Question

我想用 row.add 向 jQuery 数据表添加条目，并在添加时（或之后，如果在添加时不可能）更改外部 <td> 的 class ] 根据内容。值 > 5 应该得到 class color-green，值低于 5 color-red

var mTableROH   = $('.mm-table.ROH').DataTable(
    {
        dom: 'Bfrtip',
        "stateSave": true,

    }
);

for(let i = 0; i < 10; i++)
{
  mTableROH.row.add(
          [
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
             (Math.random() * 10).toFixed(2),
          ]
  );
 
}
 mTableROH.columns.adjust().draw();

.color-red{
  color: red;
}

color-green{
  color: green;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

                            <table id="mm-table-roh" class="table table-striped table-bordered mm-table ROH">
                                <thead>                             
                                    <tr>
                                        <th>Value 1</th>
                                        <th>Value 2</th>
                                        <th>Value 3</th>
                                        <th>Value 4</th>
                                        <th>Value 5</th>
                                        <th>Value 6</th>
                                        <th>Value 7</th>
                                        <th>Value 8</th>
        
                                    </tr>
                                </thead>
                                <tbody>
                                
                                </tbody>

                            </table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

如何在像这样添加新行时添加那些 classes？

Answer 1

虽然我在这里，但我也可以帮助您简化 for 循环，这样您就不必重复 (Math.random() * 10).toFixed(2) 8 次

for (let i = 0; i < 10; i++) {
    let randomNumbers = [];
    for (let j = 0; j < 8; j++) {
        randomNumbers.push((Math.random() * 10).toFixed(2));
    }
    mTableROH.row.add(randomNumbers)
}
mTableROH.columns.adjust().draw();

在上面的代码之后，你可以写这个，这会在添加 table 个单元格之后添加 class：

$(".mm-table.ROH tbody td").each(function() {
     const value = parseFloat($(this).text());
     $(this).addClass(value > 5 ? "color-green" : "color-red");
});

它所做的是使用 jQuery 选择器，我们可以检索 class .mm-table.ROH 元素的 tbody 内的所有 td 元素，并使用 .each() 函数，我们传入一个为每个 td 元素执行的函数。所以我们从$(this)的.text()属性中取值（指的是当前td元素），然后根据if加上对应的class值是否大于5。

Answer 2

那么，这是解决您的问题的方法。使用 document.querySelectorAll 获取所有单元格，然后您应该执行 forEach 方法以获得每个单元格的 innerHTML。因此，这将允许您获取字符串，然后您可以执行 parseFloat() 方法来获取单元格的实际数值。最后，您可以执行一个条件语句来检查该值是低于还是高于 5。如果是，则在您需要的每个单元格内分配 class 和 classList.add()。干杯

var mTableROH = $('.mm-table.ROH').DataTable({
  dom: 'Bfrtip',
  "stateSave": true,
   "createdRow": function(row, data, dataIndex) { // add a callback function
    const length = row.children.length;
    for (let i = 0; i < length; i++) {
         (data[i] > 5) ? row.children[i].classList.add("color-green") : row.children[i].classList.add("color-red");
    }
}
});

for (let i = 0; i < 10; i++) {
  mTableROH.row.add(
      [
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
        (Math.random() * 10).toFixed(2),
      ]).draw()
    .nodes()
    .to$()
    .addClass('row');
}

mTableROH.columns.adjust().draw();

.color-red {
  color: red;
}

.color-green {
  color: green;
}

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<table id="mm-table-roh" class="table table-striped table-bordered mm-table ROH">
  <thead>
    <tr>
      <th>Value 1</th>
      <th>Value 2</th>
      <th>Value 3</th>
      <th>Value 4</th>
      <th>Value 5</th>
      <th>Value 6</th>
      <th>Value 7</th>
      <th>Value 8</th>

    </tr>
  </thead>
  <tbody>

  </tbody>

</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

Answer 3

因此，在阅读您的评论后，我做了更多研究，我认为这样更好，因为我相信您关心的是性能：

var mTableROH = $('.mm-table.ROH').DataTable({
    dom: 'Bfrtip',
    "stateSave": true,
    "createdRow": function(row, data, dataIndex) { // add a callback function
        const length = row.children.length;
        for (let i = 0; i < length; i++) {
            row.children[i].className = data[i] > 5 ? "color-green" : "color-red";
        }
    }
});

// Below remains the same as my previous answer
for (let i = 0; i < 10; i++) {
    let randomNumbers = [];
    for (let j = 0; j < 8; j++) {
        randomNumbers.push((Math.random() * 10).toFixed(2));
    }
    mTableROH.row.add(randomNumbers)
}
mTableROH.columns.adjust().draw();

基本上我们可以在 .DataTable() 的对象参数中添加一个 createdRow (https://datatables.net/reference/option/createdRow) 属性在 a TR element is created (and all TD child elements have been inserted)

时执行

另一个变化是，这次它替换了 td 元素的所有 class，而不是添加 class，如果您只想添加 class你可以替换

row.children[i].className = data[i] > 5 ? "color-green" : "color-red";

和

row.children[i].classList.add(data[i] > 5 ? "color-green" : "color-red");

jQuery dataTables row.add 根据内容在外部 td 上具有不同的类

jQuery dataTables row.add with different classes on outer td based on content

javascript

jquery

datatables

jQuery dataTables row.add 根据内容在外部 td 上具有不同的 类

jQuery dataTables row.add with different classes on outer td based on content

javascript

jquery

datatables

jQuery dataTables row.add 根据内容在外部 td 上具有不同的类