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>
Related
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>
I would like to make a table row component that can contain a slot which has html in it. The problem is that the browser hoists the text out of the table before vuejs has a chance to render it.
For example, I'd like to make a table like this https://codepen.io/mankowitz/pen/LqLRWr
td, th {
border: 1px solid red;
}
.main-table {
border: 2px solid blue;
}
<table class="main-table">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Collapsed row</td>
</tr>
<tr>
<td>
<p>text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</td>
<td> Col2 </td>
<td> Col3 </td>
</tr>
<tr>
<td>
regular row col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
However, when I put it in a vue template, the formatting is all wrong. See https://codepen.io/mankowitz/pen/PVmBxV
Vue.component("table-row", {
props: ["collapsed"],
template: `
<tr>
<td v-if="collapsed" colspan="3">collapsed row</td>
<td v-if="!collapsed"> <slot /> </td>
<td v-if="!collapsed"> col2 </td>
<td v-if="!collapsed"> col3 </td>
</tr>
`
});
const example = {};
const app = new Vue(example);
app.$mount("#app");
th, td {
border: 1px solid red;
padding: 1px;
}
.main-table {
border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="main-table">
<thead>
<tr>
<th>Main Col 1</th>
<th>Main Col 2</th>
<th>Main Col 3</th>
</tr>
</thead>
<tbody>
<!-- This row has table inside table -->
<table-row :collapsed="1">
<p>title text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</table-row>
<!-- This row is normal -->
<table-row :collapsed="0">
This row is not collapsed
</table-row>
<!-- This row is collapsed (hidden) -->
<table-row :collapsed="1">
This row is collapsed
</table-row>
</tbody>
</table>
</div>
I made it work with the vue render function, you can probably do it with the template, but it will be longer:
Vue.component("table-row", {
props: ["collapsed"],
render: function(h) {
if (this.collapsed == 1) {
return h('tr', [h('td', {attrs: {colspan: 3}}, 'collapsed')]);
}
return h('tr', this.$slots.default);
}
});
const app = new Vue({el: '#app'});
th, td {
border: 1px solid red;
padding: 1px;
}
.main-table {
border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="main-table">
<thead>
<tr>
<th>Main Col 1</th>
<th>Main Col 2</th>
<th>Main Col 3</th>
</tr>
</thead>
<tbody>
<!-- This row has table inside table -->
<tr is="table-row" :collapsed="0">
<td>
<p>title text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
<!-- This row is normal -->
<tr is="table-row" :collapsed="0">
<td>This row is not collapsed</td>
<td></td>
<td></td>
</tr>
<!-- This row is collapsed (hidden) -->
<tr is="table-row" :collapsed="1">
<td>This row is collapsed</td>
</tr>
</tbody>
</table>
</div>
Note that if you use the slot as per my example you'll still have to include the <td> nodes.
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>
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>
I want to create a master-detail. So, I follow this tutorial:
http://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848
I decided to reproduce it, but there is something wrong in my code(?).
Here's my code:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what should happen:
This is what happen to me:
The row is empty! Why?
$("td:nth-child(1)")
Is overriding all first children from table.
You need to specify the line in which you want to replace the cell:
$(".saleRow td:nth-child(1)")
Your first line of javascript replaces the contents of all first children from your table.
Change :
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
with :
$("td:nth-child(1)").css("border","red dashed 2px")
and you'll see what I mean.
See it here : http://codepen.io/jeremythille/pen/qELyWX
td:nth-child(1) means "Every first <td> of each <tr> of the whole table". But you have nested tables...