Styling alternate rows using Javascript [duplicate]

Styling alternate rows using Javascript [duplicate] - javascript

This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 4 years ago.
I am trying to change background color of alternate rows of two tables using Javascript.
I am able to do it using below javascript but I'm sure there is a more efficient or short-cut way to select required child elements using CSS selectors. Can anyone help?
window.onload = function() {
var elem = document.getElementsByTagName('table')
for (let c = 0; c < elem.length; c++) {
var childElem = elem[c].getElementsByTagName('tr');
for (let d = 0; d < childElem.length; d = d + 2) {
childElem[d].classList.add('alt');
}
}
}
tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}
<html>
<body>
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h2>Backend tx</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</body>
</html>

You can achieve it with pure CSS and :nth-child:
tr:nth-child(2n) {
background-color: #eee;
}
tr:nth-child(2n + 1) {
background-color: #ccc;
}
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h2>Backend tx</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>

In CSS, simply use:
tr:nth-of-type(odd)
Working Example:
tr:nth-of-type(odd) {
background-color: rgb(191, 191, 191);
}
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>

Related

How to set different background color for dynamic table row with similar values?

In my application I am in need to set different background color to table row based on similar td value which is dynamic data. I tried to achieve this but I was unable to group the table row with different background color. I have attached the expected result screen-cap along with the fiddle link.
fiddle
HTML CODE
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>73023-04041</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
JS CODE
$("table tr td:nth-child(2)").each(function () {
var tdVal = $(this).children().find("span").text();
var valueColor = $(this).children().find("span").text();
if (valueColor == tdVal) {
//alert("if");
$(this).parent("tr").addClass("trColor");
}
});
Expected Result

You could use a filter in an each loop:
var $lastChildren = $("tbody td:last-child"); // get all last children
var colourCounter = 1;
$lastChildren.each(function() { // loop
var $child = $(this); // get the current child
if (!$child.hasClass('coloured')) { // check if it has already been coloured
var testNumber = $child.text(); // if not get the text
var $filtered = $lastChildren.filter(function() {
return $(this).text() === testNumber; // filter any other children with same text
})
if ($filtered.length) {
$filtered.addClass('coloured') // add class to say it is colored (and not include in further tests)
.parent().addClass('trColor' + colourCounter); // add colour class to row
colourCounter++;
}
}
});
/* not sure how you were going to do this colouring - I've used an incremental counter */
.trColor1 {
background-color:green;
}
.trColor2 {
background-color:lightblue;
}
.trColor3 {
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>73023-04041</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</tbody>
</table>

Here is my jsfiddle with working code. You need to give multiple classes in css and assign different colors.
https://jsfiddle.net/SmitRaval/t5ft82z2/58/
HTML
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
CSS
table td {
border:1px solid #000;
}
.trColor0 {
background-color:pink;
}
.trColor1 {
background-color:red;
}
.trColor2 {
background-color:blue;
}
.trColor3 {
background-color:green;
}
.trColor4 {
background-color:yellow;
}
JS
$(document).ready(function(){
var i = 0;
$("table tr td:nth-child(3)").each(function () {
var tdVal = $(this).text();
$("table tr td span").each(function(){
if(tdVal == $(this).text()){
$(this).closest("tr").addClass("trColor"+i);
}
});
i++;
});
});

You can have a look at following a piece of code as well.
Basically, I am creating an object with desired keys with respective Colors associated with them.
var colorMap = {};
$("table tr td:nth-child(3)").each(function () {
var tdVal = $(this).find("span").text();
//alert(tdVal);
if(checkItemExist(tdVal,colorMap) == false)
colorMap[tdVal] = 'trColor'+ (Object.keys(colorMap).length+1)+'';
//alert(JSON.stringify(colorMap));
$(this).parent("tr").addClass(colorMap[tdVal]);
});
function checkItemExist(item,array){
for (var k in array){
if (k == item){
return true;
}
}
return false;
//colorMap.indexOf(tdVal) == -1
}
table td{
border:1px solid #000;
}
.trColor1{
background-color:pink;
}
.trColor2{
background-color:red;
}
.trColor3{
background-color:green;
}
.trColor4{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>

How do I split column values into new rows at delimiter

I'm trying to split the values on each row of the 1st column in a table into new rows.
The values needs to be splitted at the / delimiter
-PMC90443FF/DMM/520P/C.Q5
The above for example should be splitted as follows:
-PMC90443FF
DMM
520P
C.Q5
This is what I got so far.
The problem with it is that it does not delete the original line and the result is bottom to top rather than from top to bottom
$('#tbl td:nth-child(1)').each(function(){
var arr = this.innerHTML.split('/');
var len = arr.length;
var i;
//$("#tbl tr:eq(1)").remove();
for (i = 0; i < arr.length; ++i) {
$('#tbl > tbody > tr:eq(' + i + ')').clone().insertAfter('#tbl > tbody > tr:eq(' + i + ')');
$('#tbl > tbody > tr:eq(' + i + ')').find("td").text(arr[i]);
}
});
td{
height: 25px;
min-width: 30px;
border: 1px solid black;
font-size:12px;
line-height:1.5;
font-family:Courier, monospace;
padding:2px 5px 2px 5px;}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<table id="tbl">
<thead>
<tr class="tbl-header">
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>UWS</td>
</tr>
<tr>
<td>DA8101A/12.DOH</td>
</tr>
<tr>
<td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td>
</tr>
<tr>
<td>-PMC18713DA/DMM/2118P/C.Q4</td>
</tr>
<tr>
<td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC18964DA/DMM/1270P/C.Q5</td>
</tr>
<tr>
<td contenteditable="false">-PMC13312DA/DMM/1500P/C.Q5</td>
</tr>
<tr>
<td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC73647FF/DMM/2540P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC15970DA/DMM/2780P/C.Q5</td>
</tr>
<tr>
<td>-PMC19458DA/DMM/2644P/C.Q5</td>
</tr>
<tr>
<td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC88130FF/DMM/2450P/C.Q5</td>
</tr>
<tr>
<td>-PMC13913DA/DMM/2930P/C.Q5</td>
</tr>
<tr>
<td>-PMC19689DA/DMM/3298P/C.Q5</td>
</tr>
<tr>
<td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td>
</tr>
<tr>
<td>-PMC11453DA/DMM/3212P/C.Q5</td>
</tr>
<tr>
<td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC90443FF/DMM/520P/C.Q5</td>
</tr>
<tr>
<td>-PMC16529DA/DMM/624P/C.Q5</td>
</tr>
<tr>
<td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC38632JG/DMM/3094P/C.Q5</td>
</tr>
<tr>
<td>-PMC19767DA/DMM/3778P/C.Q5</td>
</tr>
<tr>
<td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC12044DA/DMM/2672P/C.Q4</td>
</tr>
<tr>
<td>-PMC37949JG/DMM/1672P/C.Q6</td>
</tr>
<tr>
<td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC10478DA/DMM/1548P/C.PWG</td>
</tr>
<tr>
<td>-PMC88389FF/DMM/1164P/C.PLD</td>
</tr>
</tbody>
</table>

What you're missing is removing the existing row.
$('#tbl tr').each(function(){
var $this = $(this);
var arr = $this.text().split('/');
var len = arr.length;
var i;
// the first row to append new ones to
var $previous = $this;
for (i = 0; i < arr.length; ++i) {
// create a new row as a clone of the original one
var $tr = $this.clone();
$tr.find("td").text(arr[i]); // set text to the column
// append row after the previous one
$previous.after( $tr );
$previous = $tr;
}
// remove the original row
$this.remove();
});
td{
height: 25px;
min-width: 30px;
border: 1px solid black;
font-size:12px;
line-height:1.5;
font-family:Courier, monospace;
padding:2px 5px 2px 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl"><thead><tr class="tbl-header"><th>1</th></tr></thead><tbody><tr><td>UWS</td></tr><tr><td>DA8101A/12.DOH</td></tr><tr><td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td></tr><tr><td>-PMC18713DA/DMM/2118P/C.Q4</td></tr><tr><td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td></tr><tr><td>-PMC18964DA/DMM/1270P/C.Q5</td></tr><tr><td contenteditable="false">-PMC13312DA/DMM/1500P/C.Q5</td></tr><tr><td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td></tr><tr><td>-PMC73647FF/DMM/2540P/C.Q5.DUMMY</td></tr><tr><td>-PMC15970DA/DMM/2780P/C.Q5</td></tr><tr><td>-PMC19458DA/DMM/2644P/C.Q5</td></tr><tr><td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td></tr><tr><td>-PMC88130FF/DMM/2450P/C.Q5</td></tr><tr><td>-PMC13913DA/DMM/2930P/C.Q5</td></tr><tr><td>-PMC19689DA/DMM/3298P/C.Q5</td></tr><tr><td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td></tr><tr><td>-PMC11453DA/DMM/3212P/C.Q5</td></tr><tr><td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td></tr><tr><td>-PMC90443FF/DMM/520P/C.Q5</td></tr><tr><td>-PMC16529DA/DMM/624P/C.Q5</td></tr><tr><td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td></tr><tr><td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td></tr><tr><td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td></tr><tr><td>-PMC38632JG/DMM/3094P/C.Q5</td></tr><tr><td>-PMC19767DA/DMM/3778P/C.Q5</td></tr><tr><td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td></tr><tr><td>-PMC12044DA/DMM/2672P/C.Q4</td></tr><tr><td>-PMC37949JG/DMM/1672P/C.Q6</td></tr><tr><td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td></tr><tr><td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td></tr><tr><td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td></tr><tr><td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td></tr><tr><td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td></tr><tr><td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td></tr><tr><td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td></tr><tr><td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td></tr><tr><td>-PMC10478DA/DMM/1548P/C.PWG</td></tr><tr><td>-PMC88389FF/DMM/1164P/C.PLD</td></tr></tbody></table>

The problem with it is that it does not delete the original line and the result is bottom to top rather than from top to bottom
You can change your code to:
$('#tbl td:nth-child(1)').each(function(idx, ele){
var arr = ele.innerHTML.split('/');
var currRow = $(ele).closest('tr');
for (i = 0; i < arr.length; ++i) {
currRow.clone().insertAfter(currRow).find('td').text(arr[i]);
}
currRow.remove();
});
Steps:
get current row
for each split element clone the row and insert after current row changing the cell text
remove current row
$('#tbl td:nth-child(1)').each(function(idx, ele){
var arr = ele.innerHTML.split('/');
var currRow = $(ele).closest('tr');
for (i = 0; i < arr.length; ++i) {
currRow.clone().insertAfter(currRow).find('td').text(arr[i]);
}
currRow.remove();
});
td {
height: 25px;
min-width: 30px;
border: 1px solid black;
font-size: 12px;
line-height: 1.5;
font-family: Courier, monospace;
padding: 2px 5px 2px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
<thead>
<tr class="tbl-header">
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>UWS</td>
</tr>
<tr>
<td>DA8101A/12.DOH</td>
</tr>
<tr>
<td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td>
</tr>
<tr>
<td>-PMC18713DA/DMM/2118P/C.Q4</td>
</tr>
<tr>
<td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC18964DA/DMM/1270P/C.Q5</td>
</tr>
<tr>
<td contenteditable="false">-PMC13312DA/DMM/1500P/C.Q5</td>
</tr>
<tr>
<td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC73647FF/DMM/2540P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC15970DA/DMM/2780P/C.Q5</td>
</tr>
<tr>
<td>-PMC19458DA/DMM/2644P/C.Q5</td>
</tr>
<tr>
<td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC88130FF/DMM/2450P/C.Q5</td>
</tr>
<tr>
<td>-PMC13913DA/DMM/2930P/C.Q5</td>
</tr>
<tr>
<td>-PMC19689DA/DMM/3298P/C.Q5</td>
</tr>
<tr>
<td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td>
</tr>
<tr>
<td>-PMC11453DA/DMM/3212P/C.Q5</td>
</tr>
<tr>
<td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC90443FF/DMM/520P/C.Q5</td>
</tr>
<tr>
<td>-PMC16529DA/DMM/624P/C.Q5</td>
</tr>
<tr>
<td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC38632JG/DMM/3094P/C.Q5</td>
</tr>
<tr>
<td>-PMC19767DA/DMM/3778P/C.Q5</td>
</tr>
<tr>
<td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC12044DA/DMM/2672P/C.Q4</td>
</tr>
<tr>
<td>-PMC37949JG/DMM/1672P/C.Q6</td>
</tr>
<tr>
<td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC10478DA/DMM/1548P/C.PWG</td>
</tr>
<tr>
<td>-PMC88389FF/DMM/1164P/C.PLD</td>
</tr>
</tbody>
</table>

Something like this?
Grab all of the td elements. Split them on the '/'. Clear the row that they are in, then loop through them, creating td elements for each one. Then, add them back to the row.
[].forEach.call(document.querySelectorAll('td'), td => {
let content = td.innerHTML;
let row = td.parentElement;
row.innerHTML = '';
content.split('/').forEach( c => {
let td = document.createElement('td');
td.innerHTML = c;
row.appendChild(td);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<table id="tbl">
<thead>
<tr class="tbl-header">
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>UWS</td>
</tr>
<tr>
<td>DA8101A/12.DOH</td>
</tr>
<tr>
<td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td>
</tr>
<tr>
<td>-PMC18713DA/DMM/2118P/C.Q4</td>
</tr>
<tr>
<td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC18964DA/DMM/1270P/C.Q5</td>
</tr>
<tr>
<td contenteditable="false">-PMC13312DA/DMM/1500P/C.Q5</td>
</tr>
<tr>
<td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC73647FF/DMM/2540P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC15970DA/DMM/2780P/C.Q5</td>
</tr>
<tr>
<td>-PMC19458DA/DMM/2644P/C.Q5</td>
</tr>
<tr>
<td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC88130FF/DMM/2450P/C.Q5</td>
</tr>
<tr>
<td>-PMC13913DA/DMM/2930P/C.Q5</td>
</tr>
<tr>
<td>-PMC19689DA/DMM/3298P/C.Q5</td>
</tr>
<tr>
<td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td>
</tr>
<tr>
<td>-PMC11453DA/DMM/3212P/C.Q5</td>
</tr>
<tr>
<td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC90443FF/DMM/520P/C.Q5</td>
</tr>
<tr>
<td>-PMC16529DA/DMM/624P/C.Q5</td>
</tr>
<tr>
<td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC38632JG/DMM/3094P/C.Q5</td>
</tr>
<tr>
<td>-PMC19767DA/DMM/3778P/C.Q5</td>
</tr>
<tr>
<td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC12044DA/DMM/2672P/C.Q4</td>
</tr>
<tr>
<td>-PMC37949JG/DMM/1672P/C.Q6</td>
</tr>
<tr>
<td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC10478DA/DMM/1548P/C.PWG</td>
</tr>
<tr>
<td>-PMC88389FF/DMM/1164P/C.PLD</td>
</tr>
</tbody>
</table>

To get rid of the original line, you can empty() the element. While you still have the elements you want to insert, append each to the now empty tr.
$('#tbl td').each(function() {
var $tr = $(this).parent('tr').empty();
this.innerHTML.split('/').forEach(function(text) {
$tr.append('<tr><td>' + text + '</td></tr>');
});
});
td {
height: 25px;
min-width: 30px;
border: 1px solid black;
font-size: 12px;
line-height: 1.5;
font-family: Courier, monospace;
padding: 2px 5px 2px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
<thead>
<tr class="tbl-header">
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>UWS</td>
</tr>
<tr>
<td>DA8101A/12.DOH</td>
</tr>
<tr>
<td>-PMC37516JG/DMM/1946P/C.Q4.DUMMY</td>
</tr>
<tr>
<td>-PMC18713DA/DMM/2118P/C.Q4</td>
</tr>
<tr>
<td>-PMC17854DA/DMM/1884P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC18964DA/DMM/1270P/C.Q5</td>
</tr>
<tr>
<td contenteditable="false">-PMC13312DA/DMM/1500P/C.Q5</td>
</tr>
<tr>
<td>-PMC81630FF/DMM/2316P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC73647FF/DMM/2540P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC15970DA/DMM/2780P/C.Q5</td>
</tr>
<tr>
<td>-PMC19458DA/DMM/2644P/C.Q5</td>
</tr>
<tr>
<td>-PMC13485DA/DMM/2382P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC88130FF/DMM/2450P/C.Q5</td>
</tr>
<tr>
<td>-PMC13913DA/DMM/2930P/C.Q5</td>
</tr>
<tr>
<td>-PMC19689DA/DMM/3298P/C.Q5</td>
</tr>
<tr>
<td>-PGA2002DA/ORD/2155P/C.Q5.TRANSIT</td>
</tr>
<tr>
<td>-PMC11453DA/DMM/3212P/C.Q5</td>
</tr>
<tr>
<td>-PMC17664DA/ORD/1800P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC90443FF/DMM/520P/C.Q5</td>
</tr>
<tr>
<td>-PMC16529DA/DMM/624P/C.Q5</td>
</tr>
<tr>
<td>-PMC72784FF/DMM/4218P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC94058FF/DMM/3120P/C.Q5.DUMMY</td>
</tr>
<tr>
<td>-PMC91247FF/DMM/3466P/C.Q5.KIKKER</td>
</tr>
<tr>
<td>-PMC38632JG/DMM/3094P/C.Q5</td>
</tr>
<tr>
<td>-PMC19767DA/DMM/3778P/C.Q5</td>
</tr>
<tr>
<td>-PMC16397DA/ORD/1420P/C.Q4.TRANSIT</td>
</tr>
<tr>
<td>-PMC12044DA/DMM/2672P/C.Q4</td>
</tr>
<tr>
<td>-PMC37949JG/DMM/1672P/C.Q6</td>
</tr>
<tr>
<td>-PMC13278DA/ORD/928P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC11256DA/ORD/1595P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18938DA/ORD/1458P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC12294DA/ORD/4140P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC14236DA/ORD/4136P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC13867DA/ORD/4126P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC7523DA/ORD/4152P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC18036DA/ORD/4122P/C.PLD.TRANSIT</td>
</tr>
<tr>
<td>-PMC10478DA/DMM/1548P/C.PWG</td>
</tr>
<tr>
<td>-PMC88389FF/DMM/1164P/C.PLD</td>
</tr>
</tbody>
</table>

Tables with same height using JavaScript/CSS

I have a task where I am trying to align four tables in a page which is then printed.
But for some reason I am unable to align them with same height. I have a constraint to use only <table> <tr><td> structure.
Below is the current picture, because the data is variant in each table:
And I am trying to achieve is the below because no matter which table has how much data, all of them should be of equal height:
Any help would be great.

Take a look at flexboxes:
.wrapper {
display: flex;
}
table {
display: flex;
margin-left: 5px;
border: 1px solid #000000;
}
<div class="wrapper">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
</div>

Get each table's total number of rows. Then get the maximum from these numbers :
<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
if (ret < tab_num_rows[i])
ret = tab_num_rows[i];
}
return ret;
}
</script>
Then you make a JQuery to loop each table to add extra rows until the maximum is reached.

Flexbox will be the typical solution for this (see the other answer), however, if you are also restricted to NOT use flexbox (for example because of compatibility requirements to older browsers), you can put all four tables into the cells of one "wrapper table", like
.wrap {
width: 100%;
}
td {
background: #eee;
vertical-align: top;
}
<table class="wrap">
<tr>
<td>
<table>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>

Change background of entire table row

I'm looking to make the entire row of a table change colour (either the background colour or text colour) based on the value of the column labelled "Status". If the value in the "Status" column is "Expired" the background of the entire row should change.
(Edit: The data is going to be pulled dynamically from a database).
Any suggestions?
HTML Code
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
Thanks in advance.

If you can change how the table is rendered than I would just add the text as a class. This will be the best performance option and requires no JavaScript and the content will not flash.
tr.Expired td {
background-color: red;
}
tr.Active td {
background-color: green;
}
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="Active">
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr class="Expired">
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
Or you will need to run JavaScript code that reads the cell value and adds the class.
$("tr:has(td:last:contains('Expired'))").addClass("Expired");
tr.Expired td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>

try using CSS only adding a class to the tr.
tr.active > td {
background-color: green;
}
tr.expired > td {
background-color: red;
}
https://jsfiddle.net/jt717mL8/

In your case the status column is the 5th. So you may do something like:
$('table tr:gt(0)').each(function(idx, ele) {
if ($(ele).find('td:eq(4)').text() == 'Expired') {
$(ele).css('backgroundColor', 'yellow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

You can first get index of status th and then check each td with same index and check its text.
var i = $('th:contains(Status)').index();
$('tr').each(function() {
var td = $(this).find('td').eq(i);
if (td.text() == 'Expired') td.css('background', 'red')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

mouseevent for jquery for selection on click

I want to set the color when my mouse click on the specific row on table and it should not change the color when mouse leave from that row. Please gothrough my coding and you will understand.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").mouseenter(function(){
$(this).css("background-color", "lightgray");
});
$("tr").mouseleave(function(){
$(this).css("background-color", "white");
});
$("tr").on("click", function(){
$(this).css("background-color", "yellow");
});
});
</script>
</head>
<body>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
<tr id="trid5">
<td>5</td>
<td>kumar</td>
<td>vnr</td>
</tr>
<tr id="trid6">
<td>6</td>
<td>kali</td>
<td>mdu</td>
</tr>
<tr id="trid7">
<td>7</td>
<td>madu</td>
<td>ttl</td>
</tr>
<tr id="trid8">
<td>8</td>
<td>kalai</td>
<td>mdu</td>
</tr>
</table>
</body>
</html>
According to the above code, if we enter the mouse into a table row, it changes to the lightgray color. After that, when we leave that row, it changes to white color. Then, when we click on a specific row, it changes to yellow color, when we leave from that it also changed to white color.
My need is, if I click on the row of a table, it should set yellow color and it should not change to white when leaving.
Please help me in this issue. Thanks in advance.

In general, it is not a correct aprroach. You shouldn't change inline styling of every item - that's why people have invented CSS.
Describe the CSS rules for tr and for a custom class like selected. Then, just add selected class to tr on click.
$(document).ready(function(){
$("tr").on("click", function(){
$(this).addClass("selected");
});
});
tr:hover {
background-color: lightgray;
}
tr {
background-color: white;
}
tr.selected, tr.selected:hover, tr.selected:focus {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
</tr>
</table>
Now, you can easily manipulate with colors, hover effects etc.
For example, if you want to disable this "yellow-selecting" on clicking again and add an effect to selected tr on hover - you can change it in a moment by editing a single line of code. Check this example out (click on a row twice):
$(document).ready(function(){
$("tr").on("click", function(){
$(this).toggleClass("selected");
});
});
tr:hover {
background-color: lightgray;
}
tr {
background-color: white;
}
tr.selected, tr.selected:hover, tr.selected:focus {
background-color: yellow;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
</tr>
</table>

You can use a mix of css and jQuery as given below.
To set the mouseover style, use :hover rule, but exclude the clicked elements are given below
$(document).ready(function() {
$("tr").on("click", function() {
$(this).addClass('clicked');
});
});
tr:not(.clicked):hover {
background-color: lightgrey;
}
tr.clicked{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
<tr id="trid5">
<td>5</td>
<td>kumar</td>
<td>vnr</td>
</tr>
<tr id="trid6">
<td>6</td>
<td>kali</td>
<td>mdu</td>
</tr>
<tr id="trid7">
<td>7</td>
<td>madu</td>
<td>ttl</td>
</tr>
<tr id="trid8">
<td>8</td>
<td>kalai</td>
<td>mdu</td>
</tr>
</table>

Add This CSS No Use Jquery
table tr:hover{backgound:red;}
table tr:focus{backgound:yellow;}

We Keep Coding

JavaScript is the programming language of the Web.

Styling alternate rows using Javascript [duplicate] - javascript

Related

How to set different background color for dynamic table row with similar values?

How do I split column values into new rows at delimiter

Tables with same height using JavaScript/CSS

Change background of entire table row

mouseevent for jquery for selection on click

Categories

Resources