Javascript Background Table - javascript

im trying to set background color of fields with td id = "red" but It set only the first, whats the problem?I think that I will have to set diferent names maybe?
Here is my code:
<table id="theTable">
<tr>
<td id= "red">0 - some txt</td>
<td>1 - some txt</td>
<td>2 - some txt</td>
</tr>
<tr>
<td id = "red">3 - some txt</td>
<td>4 - some txt</td>
<td>5 - some txt</td>
</tr>
<tr>
<td><button type="button" onclick="funcion('red')">Try it</button></td>
</tr>
</table>
<script>
function funcion (id) {
document.getElementById('red').style.backgroundColor = "red";
}
</script>
</html>
Thank you in advance!


Since IDs must be unique you should use classes and this JavaScript:
function funcion(id) {
var tds = document.getElementsByClassName(id);
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = "red";
}
}
jsFiddle example
HTML
<table id="theTable">
<tr>
<td class="red">0 - some txt</td>
<td>1 - some txt</td>
<td>2 - some txt</td>
</tr>
<tr>
<td class="red">3 - some txt</td>
<td>4 - some txt</td>
<td>5 - some txt</td>
</tr>
<tr>
<td>
<button type="button" onclick="funcion('red')">Try it</button>
</td>
</tr>
</table>


I would suggest using classes, as ID's are meant to be unique, thus the function only returns the first occurrence.
The code would look something like this:
<table id="theTable">
<tr>
<td class="red">some text</td>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td class="red">some text</td>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td class="red">some text</td>
<td>some text</td>
<td>some text</td>
</tr>
</table>
and the function:
function makeThemRed()
{
var redElements = document.getElementsByClassName("red");
for(var i = 0; i < redElements.length; i++)
{
redElements[i].style.backgroundColor = "red";
}
}
because you need to iterate through the results, which is best done by a for loop.

Related

hide/show multiple table rows by one anchor click

I have a table with several rows, I have row that has anchor element when clicking this anchor some rows that have display none should be shown.
I need when clicking the anchor with class .pending-wide-col-name to toggle the class .dis-none on the table rows with class .results-secondary-hidden-row
Here is my HTML code:
<table>
<tbody>
<tr class="results-main-row has-hidden-row">
<td>
<a class="pending-wide-col-name">some text</a>
</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
</tbody>
</table>
Here is my CSS code:
.dis-none {
display: none;
}
Here is my javaScript code:
var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
for (let i = 0; i < mainRowWithHiddenChild.length; i++) {
secondaryHiddenRow[i].classList.toggle('dis-none');
}
});
I tried this JS code but it is not working.

You need to use secondaryHiddenRow.length in iteration instead of mainRowWithHiddenChild.length
var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
for (let i = 0; i < secondaryHiddenRow.length; i++) {
secondaryHiddenRow[i].classList.toggle('dis-none');
}
});
.dis-none {
display: none;
}
<table>
<tbody>
<tr class="results-main-row has-hidden-row">
<td>
<a class="pending-wide-col-name">some text</a>
</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
</tbody>
</table>

How do I hide a table row if there is a null value or a specific value

I'm not much of a javascript coder, but I'm trying to write something to make my work a little easier...
I have a table of data. The third cell of the table ('offersTable') is a display flag, which will either be 'Y', 'N', or empty. The source for the table is incomplete, which is why sometimes the cell is empty (null).
I'm trying to write a small script that will iterate down through the table, and then set the row to hide if the value if the cell is either 'N' or null. That way, only rows which have a 'Y' remain.
Please can someone help me? I'm going out of my mind trying to work this one out!
Sorry, I should have included my code...
<table id="offersTable">
<tr>
<th onclick="sortTable(0)">Lender</th>
<th onclick="sortTable(1)">Lender Code</th>
<th onclick="sortTable(2)">Display</th>
<th onclick="sortTable(3)">Loan Offered</th>
<th onclick="sortTable(4)">Term Offered</th>
<th onclick="sortTable(5)">Approval Probability</th>
<th onclick="sortTable(6)">APR</th>
<th onclick="sortTable(7)">Monthly Repayment</th>
<th onclick="sortTable(8)">Total Repayable</th>
</tr>
<tr id="lender1">
<td id="lender1Name"><script>document.getElementById("lender1Name").innerHTML = offers[0].lender_name;</script>
</td>
<td id="lender1Code"><script>document.getElementById("lender1Code").innerHTML = offers[0].lender_code;</script>
</td>
<td id="lender1Display"><script>document.getElementById("lender1Display").innerHTML = offers[0].display;</script>
</td>
<td id="lender1Value"><script>document.getElementById("lender1Value").innerHTML = offers[0].loan_offered;</script>
</td>
<td id="lender1Term"><script>document.getElementById("lender1Term").innerHTML = offers[0].term_offered;</script>
</td>
<td id="lender1AppProb"><script>document.getElementById("lender1AppProb").innerHTML = offers[0].approval_probability;</script>
</td>
<td id="lender1APR"><script>document.getElementById("lender1APR").innerHTML = offers[0].apr;</script>
</td>
<td id="lender1MonthlyRepay"><script>document.getElementById("lender1MonthlyRepay").innerHTML = offers[0].monthly_repayment;</script>
</td>
<td id="lender1TotalRepay"><script>document.getElementById("lender1TotalRepay").innerHTML = offers[0].total_repayment;</script>
</td>
</tr>
<tr id="lender2">
<td id="lender2Name"><script>document.getElementById("lender2Name").innerHTML = offers[1].lender_name;</script>
</td>
<td id="lender2Code"><script>document.getElementById("lender2Code").innerHTML = offers[1].lender_code;</script>
</td>
<td id="lender2Display"><script>document.getElementById("lender2Display").innerHTML = offers[1].display;</script>
</td>
<td id="lende2Value"><script>document.getElementById("lender2Value").innerHTML = offers[1].loan_offered;</script>
</td>
<td id="lender2Term"><script>document.getElementById("lender2Term").innerHTML = offers[1].term_offered;</script>
</td>
<td id="lender2AppProb"><script>document.getElementById("lender2AppProb").innerHTML = offers[1].approval_probability;</script>
</td>
<td id="lender2APR"><script>document.getElementById("lender2APR").innerHTML = offers[1].apr;</script>
</td>
<td id="lender2MonthlyRepay"><script>document.getElementById("lender2MonthlyRepay").innerHTML = offers[1].monthly_repayment;</script>
</td>
<td id="lender2TotalRepay"><script>document.getElementById("lender2TotalRepay").innerHTML = offers[1].total_repayment;</script>
</td>
</tr>
<tr id="lender3">
<td id="lender3Name"><script>document.getElementById("lender3Name").innerHTML = offers[2].lender_name;</script>
</td>
<td id="lender3Code"><script>document.getElementById("lender3Code").innerHTML = offers[2].lender_code;</script>
</td>
<td id="lender3Display"><script>document.getElementById("lender3Display").innerHTML = offers[2].display;</script>
</td>
<td id="lender3Value"><script>document.getElementById("lender3Value").innerHTML = offers[2].loan_offered;</script>
</td>
<td id="lender3Term"><script>document.getElementById("lender3Term").innerHTML = offers[2].term_offered;</script>
</td>
<td id="lender3AppProb"><script>document.getElementById("lender3AppProb").innerHTML = offers[2].approval_probability;</script>
</td>
<td id="lender3APR"><script>document.getElementById("lender3APR").innerHTML = offers[2].apr;</script>
</td>
<td id="lender3MonthlyRepay"><script>document.getElementById("lender3MonthlyRepay").innerHTML = offers[2].monthly_repayment;</script>
</td>
<td id="lender3TotalRepay"><script>document.getElementById("lender3TotalRepay").innerHTML = offers[2].total_repayment;</script>
</td>
</tr>
<tr id="lender4">
<td id="lender4Name"><script>document.getElementById("lender4Name").innerHTML = offers[3].lender_name;</script>
</td>
<td id="lender4Code"><script>document.getElementById("lender4Code").innerHTML = offers[3].lender_code;</script>
</td>
<td id="lender4Display"><script>document.getElementById("lender4Display").innerHTML = offers[3].display;</script>
</td>
<td id="lender4Value"><script>document.getElementById("lender4Value").innerHTML = offers[3].loan_offered;</script>
</td>
<td id="lender4Term"><script>document.getElementById("lender4Term").innerHTML = offers[3].term_offered;</script>
</td>
<td id="lender4AppProb"><script>document.getElementById("lender4AppProb").innerHTML = offers[3].approval_probability;</script>
</td>
<td id="lender4APR"><script>document.getElementById("lender4APR").innerHTML = offers[3].apr;</script>
</td>
<td id="lender4MonthlyRepay"><script>document.getElementById("lender4MonthlyRepay").innerHTML = offers[3].monthly_repayment;</script>
</td>
<td id="lender4TotalRepay"><script>document.getElementById("lender4TotalRepay").innerHTML = offers[3].total_repayment;</script>
</td>
</tr>
</table>

<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>

I would maybe try css: display: hidden; Also check out this website or research some before posting. https://salesforce.stackexchange.com/questions/122023/hide-html-table-rows-if-outputfield-is-null-or-0 Hope this helps!

without seeing your code is difficult but i know this solution with js:
for (i in document.querySelectorAll('td')) {
if (document.querySelectorAll('td')[i].textContent == 'N' || document.querySelectorAll('td')[i].textContent == 'null' ) {
document.querySelectorAll('td')[i].remove()
}
}
i'm using "remove" only to demonstrate it but you can use style.property...

I went with this option as it worked perfectly, operating in exactly the way that I wanted. Many thanks to René Datenschutz for the solution.
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>

Alternating color by column value HTML?

I have a HTML table like this.
<table class="TableA">
<tbody>
<tr>
<td>1</td>
<td class="a">aa</td>
</tr>
<tr>
<td>2</td>
<td class="a">aa</td>
</tr>
<tr>
<td>3</td>
<td class="a">bb</td>
</tr>
<tr>
<td>4</td>
<td class="a">cc</td>
</tr>
<tr>
<td>5</td>
<td class="a">dd</td>
</tr>
<tr>
<td>6</td>
<td class="a">ee</td>
</tr>
<tr>
<td>7</td>
<td class="a">ee</td>
</tr>
</tbody>
</table>
How can i alternating color by column <td class="a"> value html?
This result like this
I have tried this JS code.
My idea is to find all ("td.a") and compare string. If true bgColor = "red".
$(".TableA").each(function () {
if ($(this).find("td.a")[0].innerHTML == $(this).find("td.a")[1].innerHTML) {
$(this).find("td.a")[0].bgColor = "red";
} else {
$(this).find("td.a")[0].bgColor = "white";
}
});

To highlight consequence rows with same text, you can use the next() to compare the next element and add class accordingly.
$(".TableA tr").each(function() {
let now = $(this).find('td').last();
let next = $(this).next().find('td').last();
if (now.text() == next.text()) {
now.addClass('red');
next.addClass('red');
}
});
.red {
background: red;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<table class="TableA">
<tbody>
<tr>
<td>1</td>
<td class="a">aa</td>
</tr>
<tr>
<td>2</td>
<td class="a">aa</td>
</tr>
<tr>
<td>3</td>
<td class="a">bb</td>
</tr>
<tr>
<td>4</td>
<td class="a">cc</td>
</tr>
<tr>
<td>5</td>
<td class="a">dd</td>
</tr>
<tr>
<td>6</td>
<td class="a">ee</td>
</tr>
<tr>
<td>7</td>
<td class="a">ee</td>
</tr>
</tbody>
</table>

If you want to make two sibling td that has same innerHTML to be red background, you can try this code, it's easy to understand:
const testArray = $(".TableA td.a")
testArray.map(function(index) {
// Be careful out of the array
if (index === testArray.length - 1) return 0;
if (
testArray[index].innerHTML ===
testArray[index + 1].innerHTML
) {
testArray[index].style.background = "red";
testArray[index + 1].style.background = "red";
} else {
testArray[index].style.background = "white";
}
});

How to get total sum in multiple tables

I have a multiple table and I want to get the total per table. Please see the demo in fiddle.
var total = 0;
$("table").each(function(i){
total += +$('.a', this).text() || 0;
console.log( 'total: '+total );
$("#subtotal", this).text( total );
//console.log( '-'+$('.a', this).text() );
});
https://jsfiddle.net/juandela/6r1g30dx/2/

You need to move var total=0 inside the table loop so it resets for each table
Then you need to loop over each cell to get individual cell's text.
The problem with getting all $('.a', this).text() is it concatenates all elements text into one string which is why you see numbers like "1357" as total in first table
Finally you can't repeat ID's in page so change subtotal to a class
$("table").each(function(i) {
var total = 0;
$('.a', this).each(function() {
total += +$(this).text() || 0;
});
$(".subtotal", this).text(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="a">1</td>
<td>2</td>
</tr>
<tr>
<td class="a">3</td>
<td>4</td>
</tr>
<tr>
<td class="a">5</td>
<td>6</td>
</tr>
<tr>
<td class="a">7</td>
<td>8</td>
</tr>
<tr>
<td class="subtotal"></td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="a">1</td>
<td>2</td>
</tr>
<tr>
<td class="a">3</td>
<td>4</td>
</tr>
<tr>
<td class="a">5</td>
<td>6</td>
</tr>
<tr>
<td class="a">7</td>
<td>8</td>
</tr>
<tr>
<td class="a">9</td>
<td>10</td>
</tr>
<tr>
<td class="a">11</td>
<td>12</td>
</tr>
<tr>
<td class="subtotal"></td>
</tr>
</table>

Sort Table Rows according to table data

For example, I have a code:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I want this to be sorted like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I used this code:
function sortNum(a, b) {
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
$(function() {
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
$('table#information').append($(elems));
});
}
this works but, the problem is, the output is like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
</table>
The empty one goes to top. I want the empty ones in the bottom.
Thanks

Instead of
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;
insert
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
http://jsfiddle.net/E56j8/

You have number of plugins to sort it why are you reinventing the wheel.
Here is one such plugin
Link
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
$("#myTable").tablesorter();

Have a look at Sorting - we're doing it wrong. A simple jQuery plugin for sorting stuff is available here.
some notes on your code:
// you're binding a document ready event within a function call?
// looks the wrong way 'round, to me
function sortTheTable(){
$(function() {
// 1) you probably want to use .detach() over .remove()
// 2) "tr:has(.price)" will match ALL table rows
// containing an element with the class .price
// even if they're children of different <table>s!
// 3) $('.selector') is already "an array", at least it's sortable right away.
// there's no need for $.makeArray() here
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
// "#information" is a sufficient (and more efficient) selector,
$('table#information').append($(elems));
});
}

Categories

Resources