如何根据值突出显示表格行

Question

我正在研究从 Google 表格生成的 Google webApp Crud 数据。 搜索一切正常，但我试图根据第 7 列中的数据值突出显示某些行。

例如，如果该行包含在第 7 列“处理”中，我想用橙色突出显示该行，以便专注于该特定数据。

这些是我的脚本文件

搜索.html

<table class="table table-hover"  >
      <thead>
        <tr >
          
          <th scope="col">Ref</th>
          <th scope="col">Vehicle</th>
          <th scope="col">Color</th>
          <th scope="col">Price</th>
          <th scope="col">Rent</th>
          <th scope="col">Lcoation</th>
          <th scope="col">Status</th>
          <th scope="col">Send</th>
    
        </tr>
      </thead>
      <tbody id="searchResults" >
    
       
      </tbody>
    </table>
    
    
    <template id="rowTemplate" >
     <tr >
          
          <td class="L1"></td>
          <td class="L2"></td>
          <td class="L3"></td>
          <td class="L4"></td>
          <td class="L5"></td>
          <td class="L6"></td>
          <td class="L7"></td>
          <td class="L8"></td>
    
      </tr>
    </template>

main.html

  var searchResultsBox = document.getElementById("searchResults");
    var templateBox = document.getElementById("rowTemplate");
    var template = templateBox.content;
    
    searchResultsBox.innerHTML = "";
    
    resultsArray.forEach(function(r){
    
    var tr = template.cloneNode(true);
    var l1Column = tr.querySelector(".L1");
    var l2Column = tr.querySelector(".L2");
    var l3Column = tr.querySelector(".L3");
    var l4Column = tr.querySelector(".L4");
    var l5Column = tr.querySelector(".L5");
    var l6Column = tr.querySelector(".L6");
    var l7Column = tr.querySelector(".L7");
    var l8Column = tr.querySelector(".L8");
    
    l1Column.innerHTML = r[0];
    l2Column.innerHTML = r[1];
    l3Column.innerHTML = r[2];
    l4Column.innerHTML = r[3];
    l5Column.innerHTML = r[4];
    l6Column.innerHTML = r[5];
    l7Column.innerHTML = r[6];
    l8Column.innerHTML = r[7];
    
    searchResultsBox.appendChild(tr);
    
    });
    }

有没有办法实现我的期望？

更新这是我正在做的事情，但我完全不知道如何应用于上述代码。

<!--Script to add row colour to the table based on value-->
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
<script type="text/javascript">  

$(document).ready(function(){
hightlightRows();
});

function hightlightRows(){
$('#table tr.in_out td').each(function(){
if ($(this).text() == 'RECEIVED') {
$(this).parent().css('background-color','#d4edda')
$(this).parent().css('color','#3d774b')
}
else if ($(this).text() == 'PROCESSING') {
$(this).parent().css('background-color','#FCD5D5')
$(this).parent().css('color','red')
}

else if ($(this).text() == 'SOLD') {

$(this).parent().css('color','#AEB6BF')
}

}); 
}

</script>

<!--END Script to add row colour to the table based on value-->

Answer 1

像这样？ 您可以在处理行时添加 class 并在完成时将其删除

- - 更新 - -

我不知道你如何定义处理是什么，所以我只是简单地将属性设置为随机列以指示是否在处理中（参见 html 代码）

 let result = document.getElementById("searchResults"); // get the result let rows = result.children; // the rows of result for (let row of rows) { // loop through all the rows for (let column of row.children) { // loop through all the column from the row if (column.getAttribute("processing") === "true") { // if any column has attribute "processing" row.classList.add("processing"); // set the row to yellow } } }

 .processing { background-color: yellow; }

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <table class="table table-hover"> <thead> <tr> <th scope="col">Ref</th> <th scope="col">Vehicle</th> <th scope="col">Color</th> <th scope="col">Price</th> <th scope="col">Rent</th> <th scope="col">Lcoation</th> <th scope="col">Status</th> <th scope="col">Send</th> </tr> </thead> <tbody id="searchResults"> <tr> <td class="L1">L1</td> <td class="L2">L2</td> <td class="L3">L3</td> <td class="L4">L4</td> <td class="L5">L5</td> <td class="L6">L6</td> <td class="L7">L7</td> <td class="L8">L8</td> </tr> <tr> <td class="L1">L1</td> <td class="L2">L2</td> <td class="L3">L3</td> <td class="L4">L4</td> <td class="L5" processing="true">L5</td> <td class="L6">L6</td> <td class="L7">L7</td> <td class="L8">L8</td> </tr> <tr> <td class="L1">L1</td> <td class="L2">L2</td> <td class="L3">L3</td> <td class="L4">L4</td> <td class="L5">L5</td> <td class="L6">L6</td> <td class="L7">L7</td> <td class="L8" processing="true">L8</td> </tr> </tbody> </table> </body> </html>

如何根据值突出显示表格行

问题描述

更新这是我正在做的事情，但我完全不知道如何应用于上述代码。

1 个解决方案

解决方案1
0 2021-05-10 05:12:04

如何根据值突出显示表格行

问题描述

更新这是我正在做的事情，但我完全不知道如何应用于上述代码。

1 个解决方案

解决方案1 0 2021-05-10 05:12:04

解决方案1
0 2021-05-10 05:12:04