Line-through in Data

[JanineB]

Hello,

I have a DataPage that uses this code in the Footer:

<script>

document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(2)`).forEach(function(elem) {
 if(elem.innerHTML > 0)  elem.style.textDecoration = "line-through";
})
document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(3)`).forEach(function(elem) {
 if(elem.innerHTML > 0)  elem.style.textDecoration = "line-through";
})

document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(2)`).forEach(function(elem) {
 if(elem.innerHTML <= 0 ) elem.style.textDecoration = "none";
})
document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(3)`).forEach(function(elem) {
 if(elem.innerHTML <= 0 ) elem.style.textDecoration = "none";
})

</script>

This code is used for having the data with line-through if the number is greater than 0. However, even though I input additional column such as the Calculated Field below, it would not show. It seems the code is only used for numbers and not on currency, text or other datatype. I also tried this code but no luck:

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML>0)
  { elems[i].style.textDecoration = "line-through";}
}
</script>

Result:

What am I missing? I also wanted it to put line through in Text and currency datatypes? Should I convert it? Thanks!

[Vitalikssssss]

Hi @JanineB,

It looks like the "$" currency sign added by formatting is the reason for element value not been recognized as a number.

You may add a replace function with regex to remove unwanted characters from value formatted as currency.

So, your JavaScript would look like this:

<script>
  
var elems = document.getElementsByTagName("td");
  
for (var i=0, m=elems.length; i<m; i++) {
  
if (elems[i].innerHTML.replace(/[^0-9\.-]+/g,"") > 0) { 
  
    elems[i].style.textDecoration = "line-through";

    }
  
}
</script>

Regards,

vitalikssssss

[futurist]

On 8/11/2020 at 4:27 PM, JanineB said:

Hello,

I have a DataPage that uses this code in the Footer:

<script>

document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(2)`).forEach(function(elem) {
 if(elem.innerHTML > 0)  elem.style.textDecoration = "line-through";
})
document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(3)`).forEach(function(elem) {
 if(elem.innerHTML > 0)  elem.style.textDecoration = "line-through";
})

document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(2)`).forEach(function(elem) {
 if(elem.innerHTML <= 0 ) elem.style.textDecoration = "none";
})
document.querySelectorAll(`[action*="[@cbAppKey]"] td:nth-child(3)`).forEach(function(elem) {
 if(elem.innerHTML <= 0 ) elem.style.textDecoration = "none";
})

</script>

This code is used for having the data with line-through if the number is greater than 0. However, even though I input additional column such as the Calculated Field below, it would not show. It seems the code is only used for numbers and not on currency, text or other datatype. I also tried this code but no luck:

<script>
var elems = document.getElementsByTagName("td");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML>0)
  { elems[i].style.textDecoration = "line-through";}
}
</script>

Result:

What am I missing? I also wanted it to put line through in Text and currency datatypes? Should I convert it? Thanks!

 Hi,

Jus to add, you may refer to this link on how to apply CSS (such as hiding) multiple sibling elements all at once: