My code has the following lines:
<div style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
page has many different with different class value keys:
div
where 89148000004605691537 is variable
I want to change text color to red for cases, when values inside span for the same td is different.
E.g.:
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
should be red
but
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
should not be red.
And compares should be inside only the same td. Any css classes can be added.
How to implement it?
CodePudding user response：
//searches cells containing two spans
//if the two spans don't have the same text content, add the class to
//the spans to color the text red
$('td').each(function(){
const $td = $(this);
const $spans = $td.find('span');
if($spans.length === 2){
if($spans[0].textContent !== $spans[1].textContent){
$spans[0].classList.add('color-red');
$spans[1].classList.add('color-red');
}
}
});.color-red{
color:red;
}<div style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>CodePudding user response：
Something in vanilla JS:
const allEqual = arr => arr.every(v => v === arr[0])
document.querySelectorAll("td").forEach(td => {
const spans = [...td.querySelectorAll('span')].map(s => s.innerText);
if(spans.length !== 0 && !allEqual(spans)) {
td.classList.add("red-text");
}
}).red-text {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>CodePudding user response：
$("table td").map(function(e) {
if($(this).children("span").length){
if($(this).children("span").contents()[0].textContent != $(this).children("span").contents()[1].textContent){
$(this).addClass("text-danger");
}
}
});.text-danger {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float: left; opacity: 1; display: block;" id="3cf455cc-9777-446b-b733-c60795e419e7-3" role="tabpanel" aria-expanded="true">
<table style="border-collapse: collapse; padding: 3px; border: 1px solid grey;" border="1">
<tbody>
<tr>
<td colspan="2">
Verizon Information:
</td>
</tr>
<tr>
<td style="text-align:right;">
Account Name
</td>
<td>
<span>0442047510-00001</span><br>
<span>0442047510-00001</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Billing Cycle End Date
</td>
<td>
<span>2021-07-01T00:00:00</span><br>
<span>2022-01-12T00:00:00</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Carrier Name
</td>
<td>
<span>null</span><br>
<span>null</span><br>
</td>
</tr>
<tr>
<td style="text-align:right;">
Service Plan
</td>
<td>
<span>40515x48526x75802x84777</span><br>
<span>M2MPublicDynamic</span><br>
</td>
</tr>
</tbody>
</table>
</div>