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

Question

I'm working on Google webApp Crud data generated from Google sheets.我正在研究从 Google 表格生成的 Google webApp Crud 数据。 The search is working all fine, but I'm trying to highlight certain rows based on the data value in Column 7.搜索一切正常，但我试图根据第 7 列中的数据值突出显示某些行。

Eg If the row contains in Column 7 "PROCESSING" I want to highlight that row with an Orange color in order to focus on that particular data.例如，如果该行包含在第 7 列“处理”中，我想用橙色突出显示该行，以便专注于该特定数据。

These are my script files这些是我的脚本文件

search.html搜索.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 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);
    
    });
    }

Is there a way to achieve my expectation?有没有办法实现我的期望？

UPDATE This is something I'm working on but I exactly don't know how to apply to the above code.更新这是我正在做的事情，但我完全不知道如何应用于上述代码。

<!--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

Like This?像这样？ You can add class when the row is processing and remove it when it finisned您可以在处理行时添加 class 并在完成时将其删除

----Update---- - - 更新 - -

I don't know how you define what is the processing is, so i just simply set the attribute to random column to indicate that whether in processing (see the html code)我不知道你如何定义处理是什么，所以我只是简单地将属性设置为随机列以指示是否在处理中（参见 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>

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

问题描述

UPDATE This is something I'm working on but I exactly don't know how to apply to the above code.更新这是我正在做的事情，但我完全不知道如何应用于上述代码。

1 个解决方案

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

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

问题描述

UPDATE This is something I'm working on but I exactly don't know how to apply to the above code.更新这是我正在做的事情，但我完全不知道如何应用于上述代码。

1 个解决方案

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

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