I am currently developing a Google web application that involves CRUD data generated from Google Sheets. The search function is working perfectly, but I am trying to enhance it by highlighting specific rows based on the data value in Column 7.
For example, if a row contains "PROCESSING" in Column 7, I want to highlight that row with an orange color to draw focus to that particular data.
Here are the script files I am using:
search.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">Location</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);
});
}
Is there a way to achieve this enhancement?
UPDATE I have been trying to implement a feature where certain rows are highlighted based on their values, but I need assistance in applying it to the existing code. Here is the script snippet for adding row colors based on values:
<!--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-->