Highlight highest nth values in each table row - javascript

I have the following table, I am wanting to add a class to the top 5 values in each row, only of the TD's with the class of 'championshipPoints'. After some searching and trial and error, I have managed to get the class added to the highest value, but I am struggling to get any further.
If the 6th and 7th values are the same I only want one of them highlighted.
I would like to try and solve on my own but could do with a pointer or 2 to start me off.
Thanks in advance.
HTML
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
JQ
$(document).ready(function(){
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function(){return parseFloat($(this).text());}).get();
$tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax,
0)).addClass('highestFive');
});
});
JSFiddle

Using sort() and slice()
$('tbody tr').each(function() {
$(this).find('.championshipPoints').sort(function(a, b) {
return b.innerText - a.innerText;
}).slice(0, 5).addClass('highestFive')
});
.highestFive {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="2020societyChampionship">
<tbody>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player1</td>
<td class='championshipPoints'>6</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>7</td>
<td class='championshipPoints'>13</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
<tr class='memberPoints'>
<td>1</td>
<td class='playerName' scope='row'>player2</td>
<td class='championshipPoints'>25</td>
<td class='championshipPoints'>20</td>
<td class='championshipPoints'>8</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>16</td>
<td class='championshipPoints'>22</td>
<td class='championshipPoints'>0</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>11</td>
<td class='championshipPoints'>0</td>
<td>100</td>
</tr>
</tbody>
</table>

You were pretty close. I've made this js fiddle
$(document).ready(function() {
$('tbody tr').each(function() {
var $tds = $(this).find('.championshipPoints');
var values = $tds.map(function() {
return parseFloat($(this).text());
}).get();
values.sort((a, b) => a - b);
console.log(values);
const highlightAbove = values[values.length - 5];
$tds.each(function() {
var val = parseFloat($(this).text());
if (val >= highlightAbove) $(this).addClass('h')
})
});
});
I get the values, sort the values, get the 5th largest number, and then iterate over the tables and highlight the ones >= the 5th largest number by adding a class.

Related

Data transfer to the correct table row

so let me start from the beginning Two timers one timer is where u select when the meeting starts and one where u select the ending of the meeting, i also have a table.
first of all both timers are in another html so I used LocalStorage to get the values of the timers here on the Main html
Now the table it made from 14 rows and 3 columns
First column is with hours starting from 07:00 AM and ending at 20:00 PM
Second column will be filled with names of the meetings
And third column will be filled with the duration of the meeting
I also have a for that reads all the table column values and if it finds the same time as the time entered in the starting hour timer should add the duration of the meeting in on the third column with the id"ora",
and works fine but when it adds the meeting duration it always added on the first row !
So I need that he puts the duration of the meeting in the same row as the
Starting Hour.
Please help !
Here is the code :
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>
<script>
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora").innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}
This is because you are duplicating the same id everywhere.
You can select the 3rd TD per startT(y) by a single selector:
`tr[id="${y}"] td:nth-child(3)`
Try now to Run example below & enjoy a single LINE javascript!
var y= prompt('What is start time?','09:00');
document.querySelector(`tr[id="${y}"] td:nth-child(3)`).innerHTML = 'SELECTED'
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="09:00">
<td class="time">09:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="10:00">
<td class="time">10:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="11:00">
<td class="time">11:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="12:00">
<td class="time">12:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="13:00">
<td class="time">13:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="14:00">
<td class="time">14:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="15:00">
<td class="time">15:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="16:00">
<td class="time">16:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="17:00">
<td class="time">17:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="18:00">
<td class="time">18:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="19:00">
<td class="time">19:00</td>
<td id="nume"></td>
<td id="ora"></td>
</tr>
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume"></td>
<td id="ora"></td>
</table>
It seems that the reason it shows up in the first "ora" row each time is because all of your id="ora"s are the same. If you number each one they will correspond to the time and be different:
<table id="tbl-1">
<tr id="07:00">
<td class="time">07:00</td>
<td id="nume7"></td>
<td id="ora7"></td>
</tr>
<tr id="08:00">
<td class="time">08:00</td>
<td id="nume8"></td>
<td id="ora8"></td>
</tr>
<!-- etc. -->
<tr id="20:00">
<td class="time">20:00</td>
<td id="nume20"></td>
<td id="ora20"></td>
</tr>
</table>
Then in your script you can add the number to each id="ora":
var y = localStorage.getItem("StartT");
var x = localStorage.getItem("DiffT")
console.log(y);
var tbl = document.getElementById("tbl-1");
var numRows = tbl.rows.length;
for (var i = 1; i < numRows; i ++) {
var ID = tbl.rows[i].id;
var cells = tbl.rows[i].getElementsByTagName('td');
for (var ic=0,it=cells.length;ic<it;ic++) {
if (y == cells[ic].innerHTML) {
document.getElementById("ora" + [ic+8]).innerHTML=x;
}
console.log(cells[ic].innerHTML)
}
}
The [ic + 8] adds from 0 in your loop to get the correct time slot.

Dynamic Rowspan creation for HTML Table

Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.
your help is much appreciated.
Here is my JSON format
{"nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
Here is what I am trying to achieve
table look
HTML
<table>
<tbody>
<tr class="odd">
<td rowspan="7">All</td>
<td rowspan="6">Incident Management</td>
<td rowspan="6">Global</td>
<td rowspan="2">Bangalore</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Frimley</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="2">Palo Alto</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="even">
<td rowspan="1">90.00%</td>
<td rowspan="1">95.00%</td>
<td rowspan="1">test</td>
</tr>
<tr class="odd">
<td rowspan="1">Service Availability</td>
<td rowspan="1">Global</td>
<td rowspan="1">N/A</td>
<td rowspan="1">85.00%</td>
<td rowspan="1">90.00%</td>
<td rowspan="1">test</td>
</tr>
Though one.
var data = {"data":"Start","nodes":[{"data":"All","nodes":[{"data":"Incident Management","nodes":[{"data":"Global","nodes":[{"data":"Bangalore","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Frimley","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]},{"data":"Palo Alto","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"test","nodes":null}]}]},{"data":"90.00%","nodes":[{"data":"95.00%","nodes":[{"data":"test","nodes":null}]}]}]}]}]},{"data":"Service Availability","nodes":[{"data":"Global","nodes":[{"data":"N/A","nodes":[{"data":"85.00%","nodes":[{"data":"90.00%","nodes":[{"data":"","nodes":null}]}]}]}]}]}]}]}
function getNodeCount(obj){
var num = 0
if(obj.nodes){
for(var i=0;i<obj.nodes.length;i++){
num += getNodeCount(obj.nodes[i])
}
}else
num = 1
return num
}
function createRowHTML(data,html){
if(html==null) html = '<tr>'
html += '<td rowspan="'+getNodeCount(data)+'">'+data.data+'</td>'
if(data.nodes){
for(var i=0;i<data.nodes.length;i++){
if(i==0)
html += createRowHTML(data.nodes[i],'')
else
html += createRowHTML(data.nodes[i])
}
}else
html += '</tr>'
return html
}
var html = createRowHTML(data)
document.getElementById('result').innerHTML = '<table>'+html+'</table>'
table td{
border: solid 1px black;
}
<div id="result"></div>

How to select the previous sibling of last cell which is not null from table, using JQuery

I have a table with following rows and cells:
<table id='table1'>
<tr id='row1'>
<th>index</th>
<th>Product</th>
<th>Description</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='product'>Apples</td>
<td name='description'>fruits</td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='product'>Bananas</td>
<td name='description'>fruits</td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='product'>Carrots</td>
<td name='description'>vegetables</td>
</tr>
<tr id='row5' name='row'>
<td name='index'>4</td>
<td name='product'></td>
<td name='description'></td>
</tr>
</table>
I would like to select the index of the tr which is in this case is the last td and does not have any data under Product Column. I have tried following JQuery function but they do not work:
Sibling method
var lastrow=$('td[name=product]:not(:empty):last ~ [name=index]').html();
and also
previous method
var lastrow=$('td[name=product]:not(:empty):last').prev().html();
But I cannot get the index number of last tr which has no data in its Product heading. In other words I am unable to get the td with name=index in the tr which does not have any data in td with name=product. Does anyone know what am I doing wrong or how can I achieve what I am looking for?
Find the not empty cell and select the previous cell from it:
var lastCellBeforeCellWithNoData = $('td[name=product]:not(:empty):last').prev('[name=index]');
console.log(lastCellBeforeCellWithNoData.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
<tr id='row1'>
<th>index</th>
<th>Product</th>
<th>Description</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='product'>Apples</td>
<td name='description'>fruits</td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='product'>Bananas</td>
<td name='description'>fruits</td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='product'>Carrots</td>
<td name='description'>vegetables</td>
</tr>
<tr id='row5' name='row'>
<td name='index'>4</td>
<td name='product'></td>
<td name='description'></td>
</tr>
</table>
If you want to get the tr index use this
var trIndex = $('td[name=product]:empty').parent().index();
Else if you want to the select the name="index" use this one
var nameIndex = $('td[name=product]:empty').prev();
var trIndex = $('td[name=product]:empty').parent().index();
var nameIndex = $('td[name=product]:empty').prev().text();
console.log('Tr Index->'+trIndex, ', name="index"->'+nameIndex);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
<tr id='row1'>
<th>index</th>
<th>Product</th>
<th>Description</th>
</tr>
<tr id='row2' name='row'>
<td name='index'>1</td>
<td name='product'>Apples</td>
<td name='description'>fruits</td>
</tr>
<tr id='row3' name='row'>
<td name='index'>2</td>
<td name='product'>Bananas</td>
<td name='description'>fruits</td>
</tr>
<tr id='row4' name='row'>
<td name='index'>3</td>
<td name='product'>Carrots</td>
<td name='description'>vegetables</td>
</tr>
<tr id='row5' name='row'>
<td name='index'>4</td>
<td name='product'></td>
<td name='description'></td>
</tr>
</table>
After spending some time understanding your question, I think that you are trying to accomplish the following: Returning the last cell's index where the "Product" column is not empty (note please try not to describe it as NULL as it is a very specific term for db storage). And also, I would think that it would be better that if you can do it using other language such as PHP to compare whether the retrieved value is NULL (as NULL is different from empty space "", try to look at the previous discussion here)
However to perform what you would like to achieve I have written a short code as follows.
var tr = $('#table1 tr');
var index = 0;
for(i = tr.length - 1; i > 0; i--) {
if($(tr[i]).find('td:eq(1)').html() != "") {
index = i;
break;
}
}
console.log(index);
Basically what it does is that it will find the table's tr and compare line by line to check the 2nd column td:eq(1) to see whether the raw HTML value is empty (sorry but I would like to emphsize again it is not a very good comparison method) and return the value.
I have not optimize the code based on the performance but I think it should be suffice in achieving what you would like to do.
Hope this helps.
Regards.

JavaScript html data table issue

I have the following format for an html table (modified a bit to post here)...
<table class="table-style" id="tbl1">
<tbody>
<tr>
<th>SBU</th>
<th>DEPARTMENT</th>
<th>TY SLS</th>
<th>TY BUD</th>
</tr>
<tr>
<td class="parent" rowspan="14">test0</td>
<td class="child" style="display: table-cell;">test1</td>
<td class="child" style="display: table-cell;">106040943</td>
<td class="child" style="display: table-cell;">117638617</td>
</tr>
<tr>
<td class="child">test2</td>
<td class="child">20733153</td>
<td class="child">22164885</td>
</tr>
<tr>
<td class="child">25 test3</td>
<td class="child">49086765</td>
<td class="child">53820000</td>
</tr>
<tr>
<td class="child">test4</td>
<td class="child">30627906</td>
<td class="child">34237662</td>
</tr>
<tr>
<td class="parent" rowspan="8">test5</td>
<td class="child">test6</td>
<td class="child">120112816</td>
<td class="child">126211000</td>
</tr>
<tr>
<td class="child">test7</td>
<td class="child">66521923</td>
<td class="child">78090000</td>
</tr>
</tbody>
</table>
I am using the following JavaScript to collapse rows that have the class of 'child' from the parent class...
<script>
$(document).ready(function () {
function getChildren($row) {
var children = [];
while ($row.next().hasClass('child')){
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function () {
var children = getChildren($(this));
$.each(children, function () {
$(this).toggle();
})
});
})
</script>
However, it is only getting the first row...how can I get all rows to collapse until i reach the next parent class?
Assuming that the actual rowspan values are not correct in your example (they have too large values), this could be a solution (I corrected those values in the sample table):
$(document).ready(function () {
$('.parent').on('click', function () {
var $row = $(this).parent();
var rowspan = +$(this).attr('rowspan') || 1;
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.child').toggle();
});
});
.table-style, th, td { border: 1px solid }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-style" id="tbl1">
<tbody>
<tr>
<th>SBU</th>
<th>DEPARTMENT</th>
<th>TY SLS</th>
<th>TY BUD</th>
</tr>
<tr>
<td class="parent" rowspan="4">test0</td>
<td class="child" style="display: table-cell;">test1</td>
<td class="child" style="display: table-cell;">106040943</td>
<td class="child" style="display: table-cell;">117638617</td>
</tr>
<tr>
<td class="child">test2</td>
<td class="child">20733153</td>
<td class="child">22164885</td>
</tr>
<tr>
<td class="child">25 test3</td>
<td class="child">49086765</td>
<td class="child">53820000</td>
</tr>
<tr>
<td class="child">test4</td>
<td class="child">30627906</td>
<td class="child">34237662</td>
</tr>
<tr>
<td class="parent" rowspan="2">test5</td>
<td class="child">test6</td>
<td class="child">120112816</td>
<td class="child">126211000</td>
</tr>
<tr>
<td class="child">test7</td>
<td class="child">66521923</td>
<td class="child">78090000</td>
</tr>
</tbody>
</table>
Try jQuery nextUntil() function. Pass in the parent class and you'll get the results you're looking for.
https://api.jquery.com/nextUntil/

JQuery get cell value from row object

There is a table with few rows, one of row has .active class, each cell of row has each class, in JQuery selecting table row with .active class, how can i get cell with specific class value/text ('.html()')
var curentRow = $("#selectProduct tr.active);
//how can i get from curentRow value/text of cell with class .prod_name?
<table id="selectProduct" class="productTable">
<tr>
<td>Nr</td>
<td>ID</td>
<td>Product</td>
<td>Buy Price</td>
<td>Precent</td>
<td>Sell Price</td>
<td>Provider</td>
</tr>
<tr>
<td class="">1</td>
<td class="prod_id">1</td>
<td class="prod_name">Product 1</td>
<td class="buy_price">100</td>
<td class="plus_percent">10</td>
<td class="sell_price">110</td>
<td class="provider_name">provider 1</td>
</tr>
<tr class="active">
<td class="">2</td>
<td class="prod_id">2</td>
<td class="prod_name">Product 2</td>
<td class="buy_price">1000</td>
<td class="plus_percent">10</td>
<td class="sell_price">1100</td>
<td class="provider_name">provider 2</td>
</tr>
<tr>
<td class="">3</td>
<td class="prod_id">3</td>
<td class="prod_name">Product 3</td>
<td class="buy_price">50</td>
<td class="plus_percent">20</td>
<td class="sell_price">60</td>
<td class="provider_name">provider 3</td>
</tr>
</table>
Use function find() to find the cell that you need in the row:
var curentRow = $("#selectProduct tr.active");
var yourCell = curentRow.find('.prod_id');
var value = yourCell.text();

Categories