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>
Related
I am trying to add Price from table column to a total.
I am having problem adding values such as 10.00 or 5.99. I am able to calculate prices with int values, but not with values 10.00 or 5.99, etc.
Here is what I have below.
var table = document.getElementById("myTable"),
sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
sumVal = sumVal + parseF(table.rows[i].cells[2].innerHTML);
}
document.getElementById("val").innerHTML = "SubTotal =" + sumVal;
console.log(sumVal);
<table id="myTable">
<tr>
<th>Item</th>
<th>Price</th>
<th>Remove</th>
</tr>
<tr>
<td>Hoddie</td>
<td class="count-me">15.00</td>
<td><button onClick="myFunction()">Remove</button></td>
</tr>
<tr>
<td>Nike Cap</td>
<td class="count-me">10.99</td>
<td><button onClick="myFunction()">Remove</button></td>
</tr>
</table>
<span id="val"></span>
You have three issues:
You are grabbing the wrong cell index, indices start at 0:
table.rows[i].cells[1]
You need to call the correct parse function:
parseFloat(table.rows[i].cells[1].innerHTML);
You need to format your output:
"SubTotal = $" + sumVal.toFixed(2);
Update: Added functionality for removing rows.
updateSubTotal(); // Initial call
function updateSubTotal() {
var table = document.getElementById("myTable");
let subTotal = Array.from(table.rows).slice(1).reduce((total, row) => {
return total + parseFloat(row.cells[1].innerHTML);
}, 0);
document.getElementById("val").innerHTML = "SubTotal = $" + subTotal.toFixed(2);
}
function onClickRemove(deleteButton) {
let row = deleteButton.parentElement.parentElement;
row.parentNode.removeChild(row);
updateSubTotal(); // Call after delete
}
#myTable td {
padding: 0.25em;
}
#val {
display: block;
margin-top: 0.5em;
}
<table id="myTable">
<tr>
<th>Item</th>
<th>Price</th>
<th>Remove</th>
</tr>
<tr>
<td>Hoodie</td>
<td class="count-me">15.00</td>
<td><button onClick="onClickRemove(this)">Remove</button></td>
</tr>
<tr>
<td>Nike Cap</td>
<td class="count-me">10.99</td>
<td><button onClick="onClickRemove(this)">Remove</button></td>
</tr>
</table>
<span id="val"></span>
You are accessing the incorrect array element and also need to use parseFloat
The cells array is zero-based so you need to use cells[1] to access the second column:
var table = document.getElementById("myTable"),
sumVal = 0;
for (var i = 1; i < table.rows.length; i++) {
sumVal = sumVal + parseFloat(table.rows[i].cells[1].innerHTML);
}
document.getElementById("val").innerHTML = "SubTotal =" + sumVal;
console.log(sumVal);
<table id="myTable">
<tr>
<th>Item</th>
<th>Price</th>
<th>Remove</th>
</tr>
<tr>
<td>Hoddie</td>
<td class="count-me">15.00</td>
<td><button onClick="myFunction()">Remove</button></td>
</tr>
<tr>
<td>Nike Cap</td>
<td class="count-me">10.99</td>
<td><button onClick="myFunction()">Remove</button></td>
</tr>
</table>
<span id="val"></span>
updateSubTotal(); // Initial call
function updateSubTotal() {
var table = document.getElementById("myTable");
let subTotal = Array.from(table.rows).slice(1).reduce((total, row) => {
return total + parseFloat(row.cells[1].innerHTML);
}, 0);
let subTotal2 = Array.from(table.rows).slice(1).reduce((total, row) => {
return total + parseFloat(row.cells[2].innerHTML);
}, 0);
document.getElementById("val").innerHTML = "SubTotal = $" + subTotal.toFixed(2);
document.getElementById("val1").innerHTML = subTotal2.toFixed(2);
}
function onClickRemove(deleteButton) {
let row = deleteButton.parentElement.parentElement;
row.parentNode.removeChild(row);
updateSubTotal(); // Call after delete
}
#myTable td {
padding: 0.25em;
}
#val {
display: block;
margin-top: 0.5em;
}
<table id="myTable">
<tr>
<th>Item</th>
<th>Price</th>
<th>M2</th>
<th>Remove</th>
</tr>
<tr>
<td>Hoodie</td>
<td class="count-me">15.00</td>
<td class="count-me">34.00</th>
<td><button onClick="onClickRemove(this)">Remove</button></td>
</tr>
<tr>
<td>Nike Cap</td>
<td class="count-me">10.99</td>
<td class="count-me">22.34</th>
<td><button onClick="onClickRemove(this)">Remove</button></td>
</tr>
</table>
<span id="val"></span>
<span id="val1"></span>
var cell = document.getElementsByClassName("count-me");
var val = 0;
var i = 0;
while (cell[i] != undefined) {
val += parseFloat(cell[i].innerHTML);
i++;
} //end while
document.getElementById("val").innerHTML = parseFloat(val).toFixed(2);
console.log(parseFloat(val).toFixed(2));
<table id="myTable">
<tr>
<th>Item</th>
<th>Price</th>
<th>Remove</th>
</tr>
<tr id="">
<td>Hoddie</td>
<td class="count-me">15.00</td>
<td>
<button onClick="myFunction()">Remove</button>
</td>
</tr>
<tr>
<td>Nike Cap</td>
<td class="count-me">10.99</td>
<td>
<button onClick="myFunction()">Remove</button>
</td>
</tr>
</table>
<span id="val"></span>
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
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>
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';
});
}
How can I make the left column in a table disappear using plain JS?
This is my approach:
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>
<script>
var tab, td;
window.onload = function() {
tab = document.getElementById("tab");
td = tab.getElementsByTagName("td");
}
function inv() {
for (i = 0; i < td.length; i++) {
td[i].style.display = "none";
i++;
}
}
function vis() {
for (i = 0; i < td.length; i++) {
td[i].style.display = "block";
i++;
}
}
</script>
It works, but I have to use "ugly" loops.
Maybe there is a more efficient way by just saying column[0].display = "none".
Here is the fiddle.
Take advantage of CSS hierarchy and nth-child selectors.
Use selector tr td:nth-child(1) to select all the first column td elements.
JSfiddle
var tab;
// Use DOMContentLoaded instead of load event
document.addEventListener('DOMContentLoaded', function() {
tab = document.getElementById('tab');
});
function inv() {
tab.classList.add('hide');
}
function vis() {
tab.classList.remove('hide');
}
.hide tr td:nth-child(1) {
display: none;
}
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="inv()">invisible</button>
<button onclick="vis()">visible</button>
Demo using toggle with single button.
function toggle() {
document.getElementById('tab').classList.toggle('hide');
}
.hide tr td:nth-child(1) {
display: none;
}
<table id="tab" border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>ghi</td>
<td>jkl</td>
</tr>
<tr>
<td>mno</td>
<td>pqr</td>
</tr>
</table>
<button onclick="toggle()">Toggle</button>
By the use of some empty css classes and jQuery, you are able to achieve that in a one-liner:
<table id="tab" border="1">
<tr>
<td class="col1">abc</td>
<td class="col2">def</td>
</tr>
<tr>
<td class="col1">ghi</td>
<td class="col2">jkl</td>
</tr>
<tr >
<td class="col1">mno</td>
<td class="col2">pqr</td>
</tr>
</table>
now you can just do:
jQuery(".col1").hide();
(mind the selector with a dot before the class name)
The most efficient solution would be to inject and remove a stylesheet and let the browser do the work.
Fiddle: https://jsfiddle.net/4L4h7ea1/2/
var tab, td;
var hideFirstColumnCss = document.createElement('style');
hideFirstColumnCss.setAttribute('id', 'hideCssStyle');
hideFirstColumnCss.innerHTML = '#tab td:first-child { display: none; }';
window.onload = function () {
tab = document.getElementById("tab");
td = tab.getElementsByTagName("td");
}
function inv() {
document.head.appendChild(hideFirstColumnCss);
}
function vis() {
var style = document.getElementById('hideCssStyle');
style.parentNode.removeChild(style);
}
Use the row tags to get to your cells to hide/show them. That way you can specify an index for the row as all cells are direct children of their row.
var tab, td;
window.onload = function () {
tab = document.getElementById("tab");
tr = tab.getElementsByTagName("tr");
}
function inv() {
for (i = 0; i < td.length; i++) {
tr[i].children[0].style.display = "none";
}
}
function vis() {
for (i = 0; i < td.length; i++) {
tr[i].children[0].style.display = "block";
}
}