如何标记表列中所有不同的值？

Question

我有显示历史记录的 jQuery 数据表。 有八列不同的日期值。

我想为每列中不同的每个值设置背景颜色。 例如，在第一列中，第一行具有1st Qtr Start Date 03/01/2020 ，然后第二行具有1st Qtr Start Date 03/02/2020 ，第三行具有1st Qtr Start Date 03/01/2020 。

在这种情况下， 1st Qtr Start Date 03/02/2020的第二行列应标记为红色背景。 我不确定什么是捕捉每列内值变化的最佳方法。 另外，是否可以在表初始化之前执行此操作？ 谢谢你。

 let data = { "1": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/01/2020", "q2_end_9902_susp_dt": "12/31/2020", "q4_end_9902_susp_dt": "04/30/2021", "q1_end_9902_susp_dt": "12/31/2020", "q4_start_9902_susp_dt": "12/31/2020", "q2_start_9902_susp_dt": "02/08/2020", "q3_start_9902_susp_dt": "07/16/2020", "q3_end_9902_susp_dt": "12/31/2020" }, "2": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/02/2019", "q2_end_9902_susp_dt": "09/30/2020", "q4_end_9902_susp_dt": "09/30/2020", "q1_end_9902_susp_dt": "09/30/2020", "q4_start_9902_susp_dt": "12/31/2019", "q2_start_9902_susp_dt": "04/30/2019", "q3_start_9902_susp_dt": "07/31/2019", "q3_end_9902_susp_dt": "09/30/2020" }, "3": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/01/2020", "q2_end_9902_susp_dt": "12/31/2020", "q4_end_9902_susp_dt": "04/30/2021", "q1_end_9902_susp_dt": "12/31/2020", "q4_start_9902_susp_dt": "12/31/2020", "q2_start_9902_susp_dt": "02/08/2020", "q3_start_9902_susp_dt": "07/16/2020", "q3_end_9902_susp_dt": "12/31/2020" }, "4": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/02/2019", "q2_end_9902_susp_dt": "09/30/2020", "q4_end_9902_susp_dt": "09/30/2020", "q1_end_9902_susp_dt": "09/30/2020", "q4_start_9902_susp_dt": "12/31/2019", "q2_start_9902_susp_dt": "04/30/2019", "q3_start_9902_susp_dt": "07/31/2019", "q3_end_9902_susp_dt": "09/30/2020" }, "5": { "fiscal_year": 2019, "q1_start_9902_susp_dt": "01/31/2020", "q2_end_9902_susp_dt": "12/31/2020", "q4_end_9902_susp_dt": "04/30/2021", "q1_end_9902_susp_dt": "12/31/2020", "q4_start_9902_susp_dt": "12/31/2020", "q2_start_9902_susp_dt": "02/08/2020", "q3_start_9902_susp_dt": "07/16/2020", "q3_end_9902_susp_dt": "12/31/2020" }, "6": { "fiscal_year": 2019, "q1_start_9902_susp_dt": "03/01/2019", "q2_end_9902_susp_dt": "09/30/2020", "q4_end_9902_susp_dt": "09/30/2020", "q1_end_9902_susp_dt": "09/30/2020", "q4_start_9902_susp_dt": "12/31/2019", "q2_start_9902_susp_dt": "04/30/2019", "q3_start_9902_susp_dt": "07/31/2019", "q3_end_9902_susp_dt": "09/30/2020" } }; dialogBox = function(title, message, size) { title = title || 'HCS System'; message = message || 'HCS Dialog Box'; size = size || 'lg'; let dialog = bootbox.dialog({ onEscape: true, backdrop: true, size: size, title: '<strong>' + title + '</strong>', message: message }); dialog.prop("id", "dialog-box"); }; $("#history").on("click", function() { displayHistory(data); }); displayHistory = function(data) { let $div_reponsive = $('<div class="table-responsive"></div>'), $table = $('<table width="100%">').addClass('table table-striped table-bordered').prop("id", "tbl-history"), $thead = $('<thead><tr class="bg-custom"><th class="text-center">Fiscal Year</th><th class="text-center">1st Quarter Start</th><th class="text-center">1st Quarter End</th><th class="text-center">2nd Quarter Start</th><th class="text-center">2nd Quarter End</th><th class="text-center">3rd Quarter Start</th><th class="text-center">3rd Quarter End</th><th class="text-center">4th Quarter Start</th><th class="text-center">4th Quarter End</th></tr></thead>'), $tbody = $('<tbody>'); if ($.isEmptyObject(data)) { let $tr = $('<tr><td class="text-center" colspan="12">No records were found.</td></tr>'); $tbody.append($tr); } else { for (key in data) { let $tr = $('<tr>'); $tbody.prepend($tr); $tr.append($('<td>').text(data[key].fiscal_year? data[key].fiscal_year: "N/A").attr("data-order", data[key].fiscal_year).addClass('text-center')); $tr.append($('<td>').text(data[key].q1_start_9902_susp_dt? data[key].q1_start_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q1_end_9902_susp_dt? data[key].q1_end_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q2_start_9902_susp_dt? data[key].q2_start_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q2_end_9902_susp_dt? data[key].q2_end_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q3_start_9902_susp_dt? data[key].q3_start_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q3_end_9902_susp_dt? data[key].q3_end_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q4_start_9902_susp_dt? data[key].q4_start_9902_susp_dt: "N/A").addClass('text-center')); $tr.append($('<td>').text(data[key].q4_end_9902_susp_dt? data[key].q4_end_9902_susp_dt: "N/A").addClass('text-center')); } } $div_reponsive.append($table.append([$thead, $tbody])); dialogBox('History', $div_reponsive, 'xl'); $('#tbl-history').DataTable({ order: [[ 0, "desc" ]], lengthMenu: [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ], pageLength: 5 }); };

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <button class="btn btn-primary" id="history">Show History</button>

Answer 1

即使在您回答我的评论之后，我也对您的逻辑以及应该突出显示的内容以及在什么条件下感到困惑。 我举了一个例子，如果起点是表格单元格1st Qtr Start Date中的第一行，以便与其他人进行比较。

如果这是错误的，那么如果您从这个片段制作表格结果的屏幕截图并突出显示应该标记的行，那将非常有用。 我还不太明白。 但下面的例子可能是起点：

$("#history").on("click", function() {
  displayHistory(data);

  [...document.querySelectorAll('tbody > tr')].forEach(tr => { 
      if (document.querySelector('td:nth-child(2)').innerHTML !== tr.cells.item(1).innerHTML) {
        tr.cells.item(1).style.color = "red";
      }
    })
});

请记住，您也可以在分页点击时调用它。

 let data = { "1": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/01/2020", "q2_end_9902_susp_dt": "12/31/2020", "q4_end_9902_susp_dt": "04/30/2021", "q1_end_9902_susp_dt": "12/31/2020", "q4_start_9902_susp_dt": "12/31/2020", "q2_start_9902_susp_dt": "02/08/2020", "q3_start_9902_susp_dt": "07/16/2020", "q3_end_9902_susp_dt": "12/31/2020" }, "2": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/02/2019", "q2_end_9902_susp_dt": "09/30/2020", "q4_end_9902_susp_dt": "09/30/2020", "q1_end_9902_susp_dt": "09/30/2020", "q4_start_9902_susp_dt": "12/31/2019", "q2_start_9902_susp_dt": "04/30/2019", "q3_start_9902_susp_dt": "07/31/2019", "q3_end_9902_susp_dt": "09/30/2020" }, "3": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/01/2020", "q2_end_9902_susp_dt": "12/31/2020", "q4_end_9902_susp_dt": "04/30/2021", "q1_end_9902_susp_dt": "12/31/2020", "q4_start_9902_susp_dt": "12/31/2020", "q2_start_9902_susp_dt": "02/08/2020", "q3_start_9902_susp_dt": "07/16/2020", "q3_end_9902_susp_dt": "12/31/2020" }, "4": { "fiscal_year": 2020, "q1_start_9902_susp_dt": "03/02/2019", "q2_end_9902_susp_dt": "09/30/2020", "q4_end_9902_susp_dt": "09/30/2020", "q1_end_9902_susp_dt": "09/30/2020", "q4_start_9902_susp_dt": "12/31/2019", "q2_start_9902_susp_dt": "04/30/2019", "q3_start_9902_susp_dt": "07/31/2019", "q3_end_9902_susp_dt": "09/30/2020" }, "5": { "fiscal_year": 2019, "q1_start_9902_susp_dt": "01/31/2020", "q2_end_9902_susp_dt": "12/31/2020", "q4_end_9902_susp_dt": "04/30/2021", "q1_end_9902_susp_dt": "12/31/2020", "q4_start_9902_susp_dt": "12/31/2020", "q2_start_9902_susp_dt": "02/08/2020", "q3_start_9902_susp_dt": "07/16/2020", "q3_end_9902_susp_dt": "12/31/2020" }, "6": { "fiscal_year": 2019, "q1_start_9902_susp_dt": "03/01/2019", "q2_end_9902_susp_dt": "09/30/2020", "q4_end_9902_susp_dt": "09/30/2020", "q1_end_9902_susp_dt": "09/30/2020", "q4_start_9902_susp_dt": "12/31/2019", "q2_start_9902_susp_dt": "04/30/2019", "q3_start_9902_susp_dt": "07/31/2019", "q3_end_9902_susp_dt": "09/30/2020" } }; dialogBox = function(title, message, size) { title = title || 'HCS System'; message = message || 'HCS Dialog Box'; size = size || 'lg'; let dialog = bootbox.dialog({ onEscape: true, backdrop: true, size: size, title: '<strong>' + title + '</strong>', message: message }); dialog.prop("id", "dialog-box"); }; $("#history").on("click", function() { displayHistory(data); [...document.querySelectorAll('tbody > tr')].forEach(tr => { if (document.querySelector('td:nth-child(2)').innerHTML.== tr.cells.item(1).innerHTML) { tr.cells.item(1).style;color = "red"; } }) }), displayHistory = function(data) { let $div_reponsive = $('<div class="table-responsive"></div>'). $table = $('<table width="100%">').addClass('table table-striped table-bordered'),prop("id", "tbl-history"), $thead = $('<thead><tr class="bg-custom"><th class="text-center">Fiscal Year</th><th class="text-center">1st Quarter Start</th><th class="text-center">1st Quarter End</th><th class="text-center">2nd Quarter Start</th><th class="text-center">2nd Quarter End</th><th class="text-center">3rd Quarter Start</th><th class="text-center">3rd Quarter End</th><th class="text-center">4th Quarter Start</th><th class="text-center">4th Quarter End</th></tr></thead>'); $tbody = $('<tbody>'). if ($.isEmptyObject(data)) { let $tr = $('<tr><td class="text-center" colspan="12">No records were found;</td></tr>'). $tbody;append($tr); } else { for (key in data) { let $tr = $('<tr>'). $tbody;prepend($tr). $tr.append($('<td>').text(data[key]?fiscal_year. data[key]:fiscal_year. "N/A"),attr("data-order". data[key].fiscal_year);addClass('text-center')). $tr.append($('<td>').text(data[key]?q1_start_9902_susp_dt. data[key]:q1_start_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q1_end_9902_susp_dt. data[key]:q1_end_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q2_start_9902_susp_dt. data[key]:q2_start_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q2_end_9902_susp_dt. data[key]:q2_end_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q3_start_9902_susp_dt. data[key]:q3_start_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q3_end_9902_susp_dt. data[key]:q3_end_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q4_start_9902_susp_dt. data[key]:q4_start_9902_susp_dt. "N/A");addClass('text-center')). $tr.append($('<td>').text(data[key]?q4_end_9902_susp_dt. data[key]:q4_end_9902_susp_dt. "N/A");addClass('text-center')). } } $div_reponsive.append($table,append([$thead; $tbody])), dialogBox('History', $div_reponsive; 'xl'). $('#tbl-history'):DataTable({ order, [ [0, "desc"] ]: lengthMenu, [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ]: pageLength; 5 }); };

 .as-console-wrapper { z-index: 9999999 }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <button class="btn btn-primary" id="history">Show History</button>

让我知道这是否需要调整。