Dynamically adding colspan and removing the next td - javascript

I have a 3*3 table. I need to remove 3rd column if there is no content to display in it.In my js file I wrote something like below.
$('table tbody tr td').each(function () {
if (tempHTML.indexOf("#E") !== -1) { // true
$(this).attr("colspan", 2);
$(this).next("td").remove(); // removes extra td
}
});
tempHtml is my html, in my js file what should be the this to set colspan attribute?
Expected result is to increase the colspan and remove the next td and to have a 3*2 table. Please explain with detail as I'm new to js and html.


As nobody seems interested in answering you, and you asked how to realize your request in javascript, in spite of having presented code in jQuery, here is a solution:
const MyTableBody = document.querySelector('#Table-3cols tbody')
, BtRemC3 = document.querySelector('#Bt-Clean-col3')
BtRemC3.onclick=_=>
{
MyTableBody
.querySelectorAll('td:nth-child(3)')
.forEach(xTD=>
{
if (xTD.textContent==='')
{
let pTR = xTD.parentElement
pTR.removeChild(xTD)
pTR.cells[1].colSpan = 2
}
}
)
}
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<button id="Bt-Clean-col3">Remove empty Cols 3</button>
<table id="Table-3cols">
<thead>
<tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
</thead>
<tbody>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td></td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td></td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
</tbody>
</table>
explanations for: (arrow functions)
BtRemC3.onclick=_=>
{
MyTableBody
.querySelectorAll(`td:nth-child(3)`)
.forEach(xTD=>
{
this is like :
BtRemC3.addEventListener('click', function()
{
MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
{
so, for the complete code this is :
const MyTableBody = document.querySelector('#Table-3cols tbody')
, BtRemC3 = document.querySelector('#Bt-Clean-col3')
;
BtRemC3.addEventListener('click', function()
{
MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
{
if (/#E/.test(xTD.textContent) ) // previously (xTD.textContent==='')
{
let pTR = xTD.parentElement;
pTR.removeChild(xTD);
pTR.cells[1].colSpan = 2;
}
});
});
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<button id="Bt-Clean-col3">Remove Cols 3 with '#E'</button>
<table id="Table-3cols">
<thead>
<tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
</thead>
<tbody>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>blah blah blah#E blah </td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>blah blah#E blah </td> </tr>
<tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
</tbody>
</table>
I also changed the test about your #E value
regular expression to test if xTD.textContent contain '#E'
please read How to check whether a string contains a substring in JavaScript?


There are a couple of things you need to do:
First, if you're using each, you should pass in the index and the value. Then use the value when getting tempHTML, and doing your modifications to the HTML.
$('table tbody tr td').each(function (i,f) {
var tempHTML = $(f).text();
if (tempHTML.indexOf("#E") !== -1) { //true
$(f).attr("colspan", 2);
$(f).next().remove();
}
});
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .6em 1em}
thead { font-weight: bold }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>AEC</td>
<td>D#EF</td>
<td>GHI</td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
</table>

Related

Styling alternate rows using Javascript [duplicate]

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>

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>

HTML Table Outside border multiple TR

I have a html table and it haves some rows with rowspan, The simple border of the td is 1px solid black, but I need to make a thicker border on the Row group with rowspan. Sorry for my English, I'm going to add an image to be more clear.This is how I need to make the table:
I tryed to add
table tr{
border: 2px solid black;
}
But it make thicker the rows without rowspan too.
Does somebody have a solution in CSS or JS?
table{
border-collapse: collapse;
text-align: center;
}
table td, table th{
border:1px solid black;
padding: 0px 14px;
}
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</table>

If you can modify your actual markup you can use multiple tbody elements, and then style:
table {
border-collapse: collapse;
text-align: center;
}
table td,
table th {
border: 1px solid black;
padding: 0px 14px;
}
table tbody {
border: 4px solid black;
}
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
</table>
If you can't modify your actual markup and you can use Jquery you can make it this way:
$(document).ready(function() {
//Remove the actual tbody
$('tr').unwrap();
//Give the th a thead element
$('th').first().parent('tr').wrap('<thead></thead>');
//Evaluate wich td has rowspan and wrap on tbody based on number of rowspans
$('td').each(function() {
if ($(this).attr("rowspan") != undefined) {
var numb = parseInt($(this).attr("rowspan"), 10),
par = $(this).parent('tr').index('tr');
$("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
}
})
})
Check the Snippet
$(document).ready(function() {
$('tr').unwrap();
$('th').first().parent('tr').wrap('<thead></thead>');
$('td').each(function() {
if ($(this).attr("rowspan") != undefined) {
var numb = parseInt($(this).attr("rowspan"), 10),
par = $(this).parent('tr').index('tr');
$("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
}
})
})
table {
border-collapse: collapse;
text-align: center;
}
table td,
table th {
border: 1px solid black;
padding: 0px 14px;
}
table tbody {
border: 4px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</table>

How to make single row Non scrollable in HTML

I want to create a table scrollable but i need to freeze first row of the table from scrolling. how could i achieve this. Expecting any ideas from CSS or JS or Jquery

Your requirement is a very common use case, and quite sadly there is no native way of achieving it in any browser. You have plenty workarounds using CSS, JS, combinations, each solution having specific advantages and inconvenients (the main most common one being the need to fix the columns widths).
You can of course implement it yourself (browse on the web, you should have plenty tutorials for this). Or you can rely on a library that avoids common pitfalls and is most cross-browsers.
You would probably be interested in DataTables plugin for jQuery, and especially its FixedHeader extension.

example.
HTML
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td>4</td>
<td> 5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
</tr>
</tbody>
</table>
css
table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
JS
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler

Using Angular you could use the FixedHeader module like this found on ngmodules http://ngmodules.org/modules/FixedHeader . Or using jquery Plug in http://markmalek.github.io/Fixed-Header-Table/
Also check out using css position: sticky http://charliepark.org/css-only-sticky-headers/

This is called Table Fixed Header Scrolling. You can use this jquery plugin it's very simple to be implemented
fixedheadertable plugin

Use plugin fixedheadertable, Datatable
Refer link Stack over Flow

Categories