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>
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"
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.
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';
});
}