Remove dynamically loaded tooltips table tr if text is NA - javascript

Remove dynamically loaded tooltips table tr
I have charts so each charts bar have tooltips its shows to value previous bar value and current hover bar value so i want to hide the tr if the text NA in td. i have done below code but its not working
<div class="customTooltipRapsure">
<div class="scrollingTooltip">
<table id="tooltipTable">
<tbody>
<tr class="OldGrossBudget">
<td>Old Gross Budget </td>
<td>NA</td>
</tr>
<tr class="NewGrossBudget">
<td>New Gross Budget </td>
<td class="text-right">9,964.72</td></tr>
</tbody>
</table>
</div>
</div>
$(document).ready(function () {
$(".customTooltipRapsure #tooltipTable tbody tr td").filter(function () {
return $(this).text() === "NA";
}).closest("tr").remove();
});

You may remove NA td using javascript
function removeTR(){
var tableToolTip = document.getElementById('tooltipTable');
const table = document.getElementById('tooltipTable').getElementsByTagName('tr');
for (let x = 0; x < table.length; x++) {
const row = table[x];
const tds= row.getElementsByTagName("td");
for (let y = 0; y < tds.length; y++) {
if (tds[y].innerText == "NA") {
table[x].remove();
break;
}
}
}
}
removeTR();
<div class="customTooltipRapsure">
<div class="scrollingTooltip">
<table id="tooltipTable">
<tbody>
<tr class="OldGrossBudget">
<td>Old Gross Budget </td>
<td>NA</td>
</tr>
<tr class="NewGrossBudget">
<td>New Gross Budget </td>
<td class="text-right">9,964.72</td></tr>
</tbody>
</table>
</div>
</div>

i am not sure using filter to find column with text "NA" , so i use another method
const table = $("#tooltipTable tbody tr")
for (let x = 0; x < table.length; x++) {
const row = $("#tooltipTable tbody").find(`tr:eq(${x})`)
for (let y = 0; y < row.find("td").length; y++) {
if (row.find(`td:eq(${y})`).text() == "NA") {
row.find(`td:eq(${y})`).closest("tr").remove();
}
}
}
table {
border: solid 2px black;
}
td {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customTooltipRapsure">
<div class="scrollingTooltip">
<table id="tooltipTable">
<tbody>
<tr class="OldGrossBudget">
<td>Old Gross Budget </td>
<td>NA</td>
</tr>
<tr class="NewGrossBudget">
<td>New Gross Budget </td>
<td class="text-right">9,964.72</td>
</tr>
</tbody>
</table>
</div>
</div>
first you need to loop total row , then loop total column finally find column with text "NA"
hope this will solve your problem

Related

Why element is not found in table?

Here is a table with rows (tr).
I try to reset background color for all table rows:
for (var i = 0; i < rows.length; i++) {
if (rows[i].hasAttribute("background-color")) {
rows[i].style.backgroundColor = "transparent";
}
}
The row exmaple is:
<tr style="background-color: rgb(232, 229, 216);">
Check for the style being set and assign it null if it's truthy:
const rows = document.querySelectorAll('#demo tbody tr')
for (let row of rows) {
if (row.style.backgroundColor) {
row.style.backgroundColor = null;
}
}
<table id="baseline">
<tbody>
<tr style="background-color: red"><td>Foo</td></tr>
<tr style="background-color: blue"><td>Bar</td></tr>
<tr style="background-color: green"><td>Baz</td></tr>
</tbody>
</table>
<table id="demo">
<tbody>
<tr style="background-color: red"><td>Foo</td></tr>
<tr style="background-color: blue"><td>Bar</td></tr>
<tr style="background-color: green"><td>Baz</td></tr>
</tbody>
</table>

Display block && none duplicate issue with Javascript

I have a simple html table which has Name, Monthly Income and Income. I wrote a simple function that takes the values of the <tds> but only the Monthly Income and Income. If they are both 0 with one click hide the all the <tr>, and if you want you can show the <tr> again..
My code works fine. THE PROBLEM is, when i press hide and then show.. it is returning me an abnormal result of the specific <tr> i seriously don't know why..
function hideZeros() {
let trs, tds, td1, td2, total, i;
trs = document.getElementsByTagName("tr");
for (i = 1; i < trs.length; i++) {
tds = trs[i].getElementsByTagName("td");
td1 = parseInt(tds[1].innerHTML);
td2 = parseInt(tds[2].innerHTML);
total = (td1 + td2);
if (total === 0) {
if (trs[i].style.display === "none") {
trs[i].style.display = "block";
} else {
trs[i].style.display = "none";
}
}
}
}
<table>
<tr>
<th>Name</th>
<th>Monthly Income</th>
<th>Income</th>
</tr>
<tbody>
<tr>
<td>Jim</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>100.000</td>
<td>50.000</td>
</tr>
</tbody>
</table>
<button onclick="hideZeros()" class="btn btn-primary" type="button">Click</button>
The default display value for a <tr> is table-row not block.
This is because by default the style of a tr element is not "block" but "table-row"

Datatable footer summary in label out of the footer asp.net core 2.2 using javascript

I try to get datatable footer sum in a Label out of th footer in HTML using javascript
here is the code
<table id="tbldata" class="table table-bordered table-striped table-responsive" style="width:100%">
<thead>
<tr>
<th>Investigation.</th>
<th>Rs.</th>
<th style="width:5%">Delete.</th>
</tr>
</thead>
#foreach (investigationonly p in Model.investigationonly)
{
<tbody>
<tr>
<td>
#p.investigation
</td>
<td class="countable">
#p.price
</td>
<td style="width:5%">
Delete
</td>
</tr>
</tbody>
}
<tfoot>
<tr>
<th colspan="3" style="text-align:right">Total:<label id="lbltotal"></label></th>
</tr>
</tfoot>
</table><label id="txttotalpayble"></label>
Here is a screenshot of table working in footer successfully
as you can see its showing total sum in the footer but I try to show in label also
here is the javascript function
<script>
var cls = document.getElementById("tbldata").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
if (cls[i].className == "countable") {
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
document.getElementById("lbltotal").innerHTML = sum;
document.getElementById("txttotalpayble").innerHTML = sum;
I solved the problem my self problem is simple and the solution is very simple.
I just change Inner.html to value
<script>
var cls = document.getElementById("tbldata").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
if (cls[i].className == "countable") {
sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
}
}
document.getElementById("lbltotal").innerHTML = sum;
document.getElementById("txttotalpayble").value = sum;
Here are code and its working fine as I expected.

While loop inside a for loop concatening

when I execute this code it spits out a new row inside the table but it includes the previous iteration along with the newest one. I want all "As" to be in the first row in the main table. And then I want all "Bs" to be in the second , etc, etc. Then for A0, A1, and A2, I want them to be in their own table within the first row, same for B0, B1 in the second row, etc, etc
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
Initialize the text variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
let text = '';
But note that you can make your code more functional, shorter, and easier to read by using array methods like .map and forEach rather than using for, while, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
Declare this variable var text = ""; inside of the for-loop
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>

JavaScript, iterate class and on click show hidden tr

No jQuery.
I want to loop through unknown amount of table rows with the same class and add a click event that will change the class of hidden table row that is right bellow the one i clicked. All i managed to do is open all hidden rows on click..
Here is a fiddle with my current progres: jsfiddle.net
An my js code, that obviously doesn't work...
var x = document.querySelectorAll('.table');
var y = document.querySelectorAll(".content");
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', function(event) {
for (var j = 0; j < y.length; j++) {
if (i === j) {
y[j].style.display = "block";
}
}
});
}
EDIT:
Also i saw that it is bad to make functions inside loops. Would appreciate some feedback on that as well...
Try with nextElementSibling function
Demo fiddle
var x = document.querySelectorAll('.table');
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', function(event) {
this.nextElementSibling.style.display='block';
});
}
table tr td {
border: 2px solid #000;
}
table {
width: 500px;
height: 40px;
}
.content {
display: none;
width: 100px;
}
.table:hover {
background-color: red;
}
.content.visible {
display: table-cell;
}
<table>
<thead>
<tr>
<th>Tabela</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td>Visible</td>
</tr>
<tr class="content">
<td>Hidden 1</td>
</tr>
<tr class="table">
<td>Visible</td>
</tr>
<tr class="content">
<td>Hidden 2</td>
</tr>
<tr class="table">
<td>Visible</td>
</tr>
<tr class="content">
<td>Hidden 3</td>
</tr>
<tr class="table">
<td>Visible</td>
</tr>
<tr class="content">
<td>Hidden 4</td>
</tr>
</tbody>
</table>
or If you need like toggle effect (reclick to hide) use this js code
var x = document.querySelectorAll('.table');
for (var i = 0; i < x.length; i++) {
x[i].addEventListener('click', function(event) {
var a = this.nextElementSibling.style.display;
this.nextElementSibling.style.display = (a == 'block') ? 'none': 'block';
});
}

Categories