jQuerydataTablesrow.add根據內容在外部td上添加不同的類-有解無憂

我想使用row.add將條目添加到 jQuery Datatable 中，并在添加時（或者在添加時如果不可能的話）<td>根據內容更改外部的類。值 > 5 應該獲得類color-green，值低于 5color-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>

如何在添加這樣的新行的同時添加這些類？

uj5u.com熱心網友回復：

所以在閱讀了你的評論后，我做了更多的研究，我認為這更好，因為我相信你關心性能：

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();

基本上我們可以在執行的物件引數中添加一個 createdRow ( https://datatables.net/reference/option/createdRow ) 屬性.DataTable()a TR element is created (and all TD child elements have been inserted)

另一個變化是這次它替換了td元素的所有類而不是添加一個類，如果你只想添加你可以替換的類

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

和

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

uj5u.com熱心網友回復：

在此期間，我還可以幫助您簡化 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();

在上面的代碼之后，你可以寫這個，這會在添加表格單元格之后添加類：

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

它所做的是使用 jQuery 選擇器，我們可以使用 class檢索td元素內部的所有元素，并使用 .each() 函式，我們傳入一個為每個元素執行的函式。所以我們從（指當前元素）的屬性中取值，然后根據值是否大于5來添加對應的類。tbody.mm-table.ROHtd.text()$(this)td

uj5u.com熱心網友回復：

所以，這里有一個方法來解決你的問題。獲取所有單元格，document.querySelectorAll然后您應該執行一個forEach方法來獲取每個單元格的 innerHTML。因此，這將允許您獲取字串，并從那里您可以執行一種parseFloat()方法來獲取單元格的實際數值。最后，你可以做一個條件陳述句來檢查值是小于還是大于 5。如果是同樣的，你在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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/440143.html

標籤：javascript jQuery 数据表

上一篇：使用搜索過濾時，如果表格的<td>為空，如何隱藏其中包含表格的div？

下一篇：按下手風琴時切換一個元素的類