We Keep Coding

Formatting data in tables in Angular 8 not working

I am new to Angular. Here I am trying to format JSON data being displayed on a table. Here is what I am trying to achieve, for empty rows, instead of being blank , I fill them with a hyphen, values greater than 25 I fill there individual cells background with red color, values between 20 and 25 i fill them with yellow color, but for some weird reason my table is not being formatted completely, it is like it is not detecting the ngAfterViewInit() function, also when i try to get the average of all the columns i am getting the result as NaN for all columns.
My component.ts file
#ViewChild('myTable', {static: false}) myTable: ElementRef;
ngAfterViewInit() {
var table = this.myTable.nativeElement;
var row;
var cell;
var j = 1;
var r = 0;
var t = 0;
//console.log(table);
if (table !== null) {
while (row = table.rows[r++]) {
var c = 0;
while (cell = row.cells[c++]) {
var cellValue = cell.innerHTML;
//cell.innerHTML='[Row='+r+',Col='+c+']'; // do sth with cell
if (c === 5 && cellValue > 25) {
cell.style.background="#FF0000";
} else if (c === 5 && cellValue >= 10 && cellValue < 25) {
cell.style.background="#FFFF00";
}
}
}
//getting the average value of each column
var colL = table.rows.length - 1;
//console.log(table.rows[1].cells.length);
for (j = 1; j < table.rows[1].cells.length; j++) {
var sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
if (i < colL) {
//console.log(table.rows[i].cells[1].innerHTML);
if (Number.isInteger(parseInt(table.rows[i].cells[j].innerHTML)) === true) {
sumVal = sumVal + parseFloat(table.rows[i].cells[j].innerHTML);
} else {
table.rows[i].cells[j].value = "-";
table.rows[i].cells[j].style.backgroundColor = "#FFFF00";
}
}
// console.log(table.rows[colL].cells[table.rows.length - 1].innerHTML);
}
//Setting the last cell with the avirrage value
if (table.rows[colL].cells[j] !== table.rows[colL].cells[table.rows[1].cells.length - 2]) {
var ans = (sumVal / (table.rows.length - 2)).toFixed(2);
table.rows[colL].cells[j].innerHTML = ans;
} else
table.rows[colL].cells[j].innerHTML = sumVal;
//Taking out all cells with zore totals
if (parseFloat(ans) === 0) {
for (t = 0; t <= colL; t++) {
table.rows[t].cells[j].style.display = 'none';
}
}
}
}
}
}
My beginning of the Table
<div class="panel-body" >
<div class="table-responsive">
<table class="table table-hover" #myTable>
<thead>
My beginning of the rows
<tr class="even gradeC" style="text-align:center" ng-repeat="home in homeurban"
*ngFor="let home of homeurban">
<td class="infos" style="position: absolute; top: auto; width: 100.5px;">{{home.teamNumber}}</td>
What I am doing wrong?
Thanks in advance

Is there a way to get the Complete String using a portion of it using JavaScript?

In a GridView, the name of the table is getting generated dynamically. but it will have the dynamic Name with GridView ID gets appended.
something Like "w123443dsfnsbd32dkkd_GridView1". so first part will always keep changing whenever we reloads the grid. so I would like to get the name of the Grid with "_GridView1", with this I would like to fetch the complete Grid Name. So Is there a way to look for this?
I tried this var table = document.getElementById("GridView1"); but didn't work.
Code:
var table = document.getElementById("wcwidget_df5339c463eedb_widget_gridView1");
if (table.rows.length > 0) {
for (var i = 0 ; i < table.rows.length; ++i) {
if (table.rows[i].cells[0].innerText == "Company1" || table.rows[i].cells[0].innerText == "Company2" ||
table.rows[i].cells[0].innerText == "Company5" )
{
for (var k = 1; k < table.rows[i].cells.length; ++k) {
table.rows[i].cells[k].style.fontWeight = "bold";
table.rows[i].cells[k].style.color = "black";
}
}
}
for (var i = 0 ; i < table.rows.length; ++i) {
if (table.rows[i].cells[0].innerText == "Risk" || table.rows[i].cells[0].innerText == "Medium Risk" || table.rows[i].cells[0].innerText == "High Risk" ) {
table.rows[i].cells[0].style.fontWeight = "bold";
table.rows[i].cells[0].style.color = "black";
}
}
}

try this:
document.querySelectorAll("[id*='GridView1']")
this will return an array.

On modern browsers see the #amit's answer.
If compatibility with older browsers is required:
var allElements = document.getElementsByTagName("*");
for (var i = 0, n = allElements.length; i < n; ++i) {
var element = allElements[i];
if (element.id.endsWith("_GridView1")) {
// do something with the found element
break;
}
}

JS: Change row background color on specific column value

I am working on this table that as to be managed by the client. I want to know if is possible to change the color of the entire row when in the "Status" column he writes the word "vermietet".
In this case when the client write "vermietet" the rows that contains that word change background color in orange.
Any JS tips?
Thanks in adivce.
EDIT:
I tried this
<script>
jQuery(document).ready(function($){
$(document.body)var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}
});
</script>

Pure JS solution:
var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}

td content Javascript change color and replace

So, I have a table with text. There are <th> and <td> in the table. On certain cells, depending upon the text of the cell, I want the background to change a certain color and on one particular cell if it contains a "+" sign, I want to change the color and delete the "+" sign.
This is what I have. It breaks when it gets to an empty cell and the "+" replace is too strict, i.e. it will remove the "+" only if that is the only thing in the cell. If it is "8+" it will not remove the "+" sign.
I'm new when it comes to Javascript. I'm sure this could be done a lot simpler.
<table>
<tr>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>K</td>
<td> </td>
<td>8+</td>
</tr>
</table>
<script type="text/javascript">
function isEmpty( el ){
return !$.trim(el.html())
}
var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
var node = allTableCells[i];
//get the text from the first child node - which should be a text node
var currentText = node.childNodes[0].nodeValue;
//check for certain content and assign this table cell's background color accordingly
if (!isEmpty($(currentText))) {
if (currentText === "K")
node.style.backgroundColor = "#ffff00";
else if (currentText === "+")
node.style.backgroundColor = "#0070c0";node.childNodes[0].nodeValue = currentText.replace("+", " ");
}
}
var allTableHeaders = document.getElementsByTagName("th");
for(var ic = 0, max = allTableHeaders.length; ic < max; ic++) {
var node = allTableHeaders[ic];
//get the text from the first child node - which should be a text node
var currentHeadText = node.childNodes[0].nodeValue;
//check for certain days of the week and assign this table cell's background color accordingly
if (!isEmpty($(currentHeadText))) {
if (currentHeadText === "SAT")
node.style.backgroundColor = "#ff0000";
else if (currentHeadText === "SUN")
node.style.backgroundColor = "#91CF4F";
}
}
</script>

I think you want to be checking if currentText contains a +, not checking if they are equal,
if (currentText.indexOf("+") > -1)
node.style.backgroundColor = "#0070c0";
node.childNodes[0].nodeValue = currentText.replace("+", " ");
}

Just a few ammendments are needed...
the way you use isEmpty, you don't need to call .html() on it's argument. Also, as the previous answer suggested, test for the containment of "+" in currentText using jQuery indexOf().
function isEmpty( el ){
return !$.trim(el)
}
var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
var node = allTableCells[i];
//get the text from the first child node - which should be a text node
var $currentText = node.childNodes[0].nodeValue;
//check for certain content and assign this table cell's background color accordingly
if (!isEmpty($currentText)) {
if ($currentText === "K")
node.style.backgroundColor = "#ffff00";
else if ($currentText.indexOf("+") != -1){
node.style.backgroundColor = "#0070c0";
node.childNodes[0].nodeValue = $currentText.replace("+", " ");
}
}
}
var allTableHeaders = document.getElementsByTagName("th");
for(var ic = 0, max = allTableHeaders.length; ic < max; ic++) {
var node = allTableHeaders[ic];
//get the text from the first child node - which should be a text node
var currentHeadText = node.childNodes[0].nodeValue;
//check for certain days of the week and assign this table cell's background color accordingly
if (!isEmpty(currentHeadText)) {
if (currentHeadText === "SAT")
node.style.backgroundColor = "#ff0000";
else if (currentHeadText === "SUN")
node.style.backgroundColor = "#91CF4F";
}
}

jQuery: Reset classes once the field is empty

NOTE:
The following solution comes from THIS TOPIC, please see that first.
I have 11 inputs:
<input type="text" class="[something]-input inputs">
(Where [something] is a name, different for every input)
$(document).on("change", ".inputs", function(){
var thisclass = $(this).attr('class').split("-")[0];
if($(this).val() == ''){
//
}
highlightInputNumbers(thisclass, 0);
});
The highlightInputNumbers function goes this way:
function highlightInputNumbers(classe, stepcount, empty){
var all= $("td[class*="+classe+"]");
var index = all.length-1;
var concat_steps = $(all[index]).html().split('.')
//var due_serie = $(all[index]).html().split('.')
var due_serie = $('.'+classe+'-input').val().split('.')
for (var i = index; i >= (index-stepcount)+2; i--) {
due_serie = due_serie.concat($(all[i-1]).html().split('.'));
};
//Rimuovo i doppioni
var serieCompleta = [];
$.each(due_serie, function(i, el){
if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el);
});
//Ottengo dati
for(var s = 0; s < index-(stepcount-1); s++){
var bar = $(all[s]);
var barnum = bar.html().split('.');
bar.html('');
var found = 0;
for(i = 0; i<= barnum.length-1; i++){
for(n = 0; n<= serieCompleta.length-1; n++){
if(i != 4){ var punto = '.' }else{ var punto = ''}
/* Problem here:*/
if(barnum[i] == serieCompleta[n]){
bar.append('<span class="highlight">'+barnum[i]+'</span><span class="fade">'+punto+'</span>');
found = barnum[i];
}
}
if(barnum[i] != found){
bar.append('<span class="fade">'+barnum[i]+punto+'</span>');
}
}
}
}
Where I commented /*Problem here*/ is where I highlight the numbers in the column (that I have inserted), but if I remove the numbers in the input they stay highlighted... If I change them it keeps the old ones..
As you can see here: https://dl.dropboxusercontent.com/u/2276958/Cols_and_rows.mov

Small addition in your code.
Let me try to explain what was happening in your code.
At first try:
your code gets the input values (eg. 89.30.20)
Loop through all available values in the table
Split each value by '.'
Then loop through these spitted values to check for match and highlight
Replace the matched number to highlighted span (i.e 20 to 20 and unmatched number to faded span.
This all works for first time. But at the second try, your code breaks from step 3. As in step 3 code tries to split values by '.' but the values were replaced with Span values in your first try. So now to rectify this issue I added small check and 2-3 lines of extra code to extract actual values from Span values.
That extra code is:
// Check if values bar already contains Span tags (means already processed in first try
var hasSpans = bar.find('span').length>0;
if(hasSpans)
{
//If yes then extract the actual values from these span tags without '.' (This will work for all tries after FIRST)
barnum=bar.find('span').map(
function() {
if($(this).html() != '.')
return $(this).html().replace('.','');
}).get();
}
// else normal case, split the values by '.' (This will for very FIRST try)
else barnum = bar.html().split('.');
$(document).on("change", ".inputs", function(){
var thisclass = $(this).attr('class').split("-")[0];
if($(this).val() == ''){
//
}
highlightInputNumbers(thisclass, 0);
});
function highlightInputNumbers(classe, stepcount, empty){
var all= $("td[class*="+classe+"]");
var index = all.length-1;
var concat_steps = $(all[index]).html().split('.')
//var due_serie = $(all[index]).html().split('.')
var due_serie = $('.'+classe+'-input').val().split('.')
for (var i = index; i >= (index-stepcount)+2; i--) {
due_serie = due_serie.concat($(all[i-1]).html().split('.'));
};
//Rimuovo i doppioni
var serieCompleta = [];
$.each(due_serie, function(i, el){
if($.inArray(el, serieCompleta) === -1) serieCompleta.push(el);
});
//Ottengo dati
for(var s = 0; s < index-(stepcount-1); s++){
var bar = $(all[s]);
var barnum;
var hasSpans = bar.find('span').length>0;
if(hasSpans)
{
barnum=bar.find('span').map(
function() {
if($(this).html() != '.')
return $(this).html().replace('.','');
}).get();
}
else barnum = bar.html().split('.');
bar.html('');
var found = 0;
for(i = 0; i<= barnum.length-1; i++){
for(n = 0; n<= serieCompleta.length-1; n++){
if(i != 4){ var punto = '.' }else{ var punto = ''}
/* Problem here:*/
if(barnum[i] == serieCompleta[n]){
bar.append('<span class="highlight">'+barnum[i]+'</span><span class="fade">'+punto+'</span>');
found = barnum[i];
}
}
if(barnum[i] != found){
bar.append('<span class="fade">'+barnum[i]+punto+'</span>');
}
}
}
}
span.highlight{
color:green;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>02/05/2015</td><td class="bari1">89.10.86.30.65</td></tr>
<tr><td>30/04/2015</td><td class="bari2">96.11.73.36.13</td></tr>
<tr><td>02/05/2015</td><td class="bari3">78.34.50.72.11</td></tr>
<tr><td>30/04/2015</td><td class="bari4">34.78.69.60.22</td></tr>
<tr><td>02/05/2015</td><td class="bari5">12.29.30.69.33</td></tr>
<tr><td>30/04/2015</td><td class="bari6">59.10.20.96.44</td></tr>
<tr><td colspan="2"><input type="text" class="bari-input inputs"></td></tr>
</table>
<table>
<tr><td>02/05/2015</td><td class="vari1">89.10.86.30.65</td></tr>
<tr><td>30/04/2015</td><td class="vari2">96.11.73.36.13</td></tr>
<tr><td>02/05/2015</td><td class="vari3">78.34.50.72.11</td></tr>
<tr><td>30/04/2015</td><td class="vari4">34.78.69.60.22</td></tr>
<tr><td>02/05/2015</td><td class="vari5">12.29.30.69.33</td></tr>
<tr><td>30/04/2015</td><td class="vari6">59.10.20.96.44</td></tr>
<tr><td colspan="2"><input type="text" class="vari-input inputs"></td></tr>
</table>