jQuery TD resize event? - javascript

What do I do if I want to know when a <td>'s size changes?
table code:
<style>
#BA1{
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
}
#BA1 th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
#BA1 td {
border:1px solid #C0C0C0;
padding:5px;
}
</style>
<table id="BA1"> <caption> </caption> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> dfdfdfdfdfdf</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>
How can i listen this event?
I have tried these methods:
var x = 0;
$("td").resize(function(){
var txt = x += 1;
});
//planB
$("td").addEventListener("resize", myFunction);
var x = 0;
function myFunction() {
var txt = x += 1;
}
But this code is not working
How can i fix this?

Related

How would I make something appear above a specific table?

I want to replicate this website: http://www.espn.com/nba/tradeMachine
I would like to make clicking on a player's name generate where I want to send him to and then have him show up above that team's roster table.
I tried to create on giant table with different elements, but it wouldn't work for some reason.
function knicks() {
var x = document.getElementById("knicksSalary");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function nets() {
var x = document.getElementById("netsSalary");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
} {
var nets = document.getElementById("BrooklynNets");
if (x.style.display === "block") {
nets.style.backgroundColor = "red";
} else {
nets.style.backgroundColor = "white";
}
}
}
function hawks() {
var x = document.getElementById("hawksSalary");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
} {
var hawks = document.getElementById("AtlantaHawks");
if (x.style.display === "block") {
hawks.style.backgroundColor = "red";
} else {
hawks.style.backgroundColor = "white";
}
}
}
function celtics() {
var x = document.getElementById("celticsSalary");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
} {
var celtics = document.getElementById("BostonCeltics");
if (x.style.display === "block") {
celtics.style.backgroundColor = "red";
} else {
celtics.style.backgroundColor = "white";
}
}
}
.beta * {
box-sizing: border-box;
}
.row {
display: flex;
margin-left: -5px;
margin-right: -5px;
}
.column {
flex: 50% padding: 5px;
}
.beta table {
border-collapse: collapse;
border-spacing: 0;
width: 100% border: 1 px solid #ddd;
}
.beta th,
td {
text-align: left;
padding: 16px;
}
.beta tr:nth-child(even) .divisions table,
th,
td {
border: 1px solid black;
}
<body>
<center>
<header>
<h2>NBA Trade Maker</h2>
</center>
<nav>
<center>
<table class="divisions">
<tr>
<th>Atlantic Division</th>
<th>Central Division</th>
<th>Southeast Division</th>
<th>Northwest Division</th>
<th>Southwest Division</th>
<th>Pacific Division</th>
</tr>
<tr>
<td id="BostonCeltics" onclick="celtics()">Boston Celtics</td>
<td>Chicago Bulls</td>
<td id="AtlantaHawks" onclick="hawks()">Atlanta Hawks</td>
<td>Denver Nuggets</td>
<td>Dallas Mavericks</td>
<td>Golden State Warriors</td>
</tr>
<tr>
<td id="BrooklynNets" onclick="nets()">Brooklyn Nets</td>
<td>Cleveland Cavaliers</td>
<td>Charlotte Hornets</td>
<td>Minnesota Timberwolves</td>
<td>Houston Rockets</td>
<td>Los Angeles Clippers</td>
</tr>
<tr>
<td id="NYKnicks" onclick="knicks()">New York Knicks</td>
<td>Detroit Pistons</td>
<td>Miami Heat</td>
<td>Oklahoma City Thunder</td>
<td>Memphis Grizzlies</td>
<td>Los Angeles Lakers</td>
</tr>
<tr>
<td>Philadelphia 76ers</td>
<td>Indiana Pacers</td>
<td>Orlando Magic</td>
<td>Portland Trail Blazers</td>
<td>New Orleans Pelicans</td>
<td>Phoenix Suns</td>
</tr>
<tr>
<td>Toronto Raptors</td>
<td>Milwaukee Bucks</td>
<td>Washington Wizards</td>
<td>Utah Jazz</td>
<td>San Antonio Spurs</td>
<td>Sacramento Kings</td>
</tr>
</table>
</center>
<br>
<br>
<br>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<div class="row">
<div class="column">
<div id="hawksSalary" style="display:none" class="beta">
<table>
<thead>
<tr class="tableizer-firstrow">
<th>Hawks Players</th>
<th>2022-23 Salary </th>
</tr>
</thead>
<tbody>
<tr>
<td>Trae Young</td>
<td>$37,096,500 </td>
</tr>
<tr>
<td>John Collins</td>
<td>$23,500,000 </td>
</tr>
<tr>
<td>Clint Capela</td>
<td>$18,206,897 </td>
</tr>
<tr>
<td>Bogdan Bogdanovic</td>
<td>$18,000,000 </td>
</tr>
<tr>
<td>Dejounte Murray</td>
<td>$16,571,120 </td>
</tr>
<tr>
<td>De'Andre Hunter</td>
<td>$9,835,881 </td>
</tr>
<tr>
<td>Onyeka Okongwu</td>
<td>$6,395,160 </td>
</tr>
<tr>
<td>Justin Holiday</td>
<td>$6,292,440 </td>
</tr>
<tr>
<td>A.J. Griffin</td>
<td>$3,536,160 </td>
</tr>
<tr>
<td>Jalen Johnson</td>
<td>$2,792,640 </td>
</tr>
<tr>
<td>Frank Kaminsky</td>
<td>$2,463,490 </td>
</tr>
<tr>
<td>Aaron Holiday</td>
<td>$1,968,175 </td>
</tr>
<tr>
<td>Vit Krejci</td>
<td>$1,563,518 </td>
</tr>
<tr>
<td>Tyrese Martin</td>
<td>$1,017,781 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="column">
<div id="celticsSalary" style="display:none" class="beta">
<table>
<thead>
<tr class="tableizer-firstrow">
<th>Celtics Players</th>
<th>2022-23 Salary </th>
</tr>
</thead>
<tbody>
<tr>
<td>Jayson Tatum</td>
<td>$30,351,780 </td>
</tr>
<tr>
<td>Jaylen Brown</td>
<td>$26,669,643 </td>
</tr>
<tr>
<td>Al Horford</td>
<td>$26,500,000 </td>
</tr>
<tr>
<td>Malcolm Brogdon</td>
<td>$22,600,000 </td>
</tr>
<tr>
<td>Marcus Smart</td>
<td>$16,607,142 </td>
</tr>
<tr>
<td>Derrick White</td>
<td>$16,392,857 </td>
</tr>
<tr>
<td>Robert Williams III</td>
<td>$10,714,287 </td>
</tr>
<tr>
<td>Danilo Gallinari</td>
<td>$6,479,000 </td>
</tr>
<tr>
<td>Grant Williams</td>
<td>$4,306,281 </td>
</tr>
<tr>
<td>Payton Pritchard</td>
<td>$2,239,200 </td>
</tr>
<tr>
<td>Luke Kornet</td>
<td>$2,133,278 </td>
</tr>
<tr>
<td>Blake Griffin</td>
<td>$2,905,851 </td>
</tr>
<tr>
<td>Noah Vonleh</td>
<td>$2,463,490 </td>
</tr>
<tr>
<td>Justin Jackson</td>
<td>$2,133,278 </td>
</tr>
<tr>
<td>Sam Hauser</td>
<td>$1,637,966 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="column">
<div id="netsSalary" style="display:none" class="beta">
<table>
<thead>
<tr class="tableizer-firstrow">
<th>Nets Players</th>
<th>2022-23 Salary </th>
</tr>
</thead>
<tbody>
<tr>
<td>Kevin Durant</td>
<td>$42,969,845 </td>
</tr>
<tr>
<td>Kyrie Irving</td>
<td>$36,503,300 </td>
</tr>
<tr>
<td>Ben Simmons</td>
<td>$35,448,672 </td>
</tr>
<tr>
<td>Joe Harris</td>
<td>$18,642,857 </td>
</tr>
<tr>
<td>Royce O'Neale</td>
<td>$9,200,000 </td>
</tr>
<tr>
<td>Nicolas Claxton</td>
<td>$8,500,000 </td>
</tr>
<tr>
<td>Seth Curry</td>
<td>$8,496,653 </td>
</tr>
<tr>
<td>Patty Mills</td>
<td>$6,479,000 </td>
</tr>
<tr>
<td>Cameron Thomas</td>
<td>$2,138,160 </td>
</tr>
<tr>
<td>Day'Ron Sharpe</td>
<td>$2,109,480 </td>
</tr>
<tr>
<td>Edmond Sumner</td>
<td>$1,968,175 </td>
</tr>
<tr>
<td>Markieff Morris</td>
<td>$2,905,851 </td>
</tr>
<tr>
<td>T.J. Warren</td>
<td>$2,628,597 </td>
</tr>
<tr>
<td>Yuta Watanabe</td>
<td>$1,968,175 </td>
</tr>
<tr>
<td>Kessler Edwards</td>
<td>$1,637,966 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

How to select only an element in the last row of a table using CSS selectors

I have a table with many expandable/collapsible rows that are hidden by labels until clicked (shown below). Input in the right-hand column of the table is meant to be edited and summed, so I have a function to set each cell to be .contentEditable and calculate the sum total of the user-entered numbers. However, because I do not want the sum itself (in the final row of the table) to be edited, I have the following restriction to the event handler in jQuery:
document.querySelectorAll("table tr:not(:last-child) td ~ td");
While the :not(:last-child) part gets rid of the issue of the editable final row, it creates another issue: now, the last rows of every expandable section (the "Jill" and "Jim" rows in the below example) are unable to be edited, too. Is there a way to fix this without making the absolute final row of the table ("Total") editable in the process?
To better visualize the issue, I've attached an example table that demonstrates the problem.
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$("label[for='" + this.id + "'] span").toggle();
$(this).parents().next('.hide').toggle();
});
});
function editcell() {
let cellnum = document.querySelectorAll("table tr:not(:last-child) td ~ td");
cellnum.forEach(td => {
td.setAttribute("contentEditable", true);
td.addEventListener("change", getsum());
});
}
function getsum() {
let sum = 0;
let cellnum = document.querySelectorAll("table tr td ~ td");
let count = cellnum.length - 1;
for (i = 0; i < count; i++) {
sum += parseInt(cellnum[i].innerHTML) || 0;
}
cellnum[count].innerHTML = sum;
}
editcell();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class1">
<b>Class 1</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class1" id="class1" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td id="jack" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jill</td>
<td id="jill" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class2">
<b>Class 2</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class2" id="class2" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Joe</td>
<td id="joe" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jane</td>
<td id="jane" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jim</td>
<td id="jim" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tr>
<td style="font-weight:bold; text-align: center">Total</td>
<td id="total"></td>
</tr>
</table>

You can select (to ignore) the total cell as it has a unique id:
let cellnum = document.querySelectorAll("table tr td ~ td:not(#total)");
$(document).ready(function() {
$('.hide').hide();
$('[data-toggle="toggle"]').change(function() {
$("label[for='" + this.id + "'] span").toggle();
$(this).parents().next('.hide').toggle();
});
});
function editcell() {
let cellnum = document.querySelectorAll("table tr td ~ td:not(#total)");
cellnum.forEach(td => {
td.setAttribute("contentEditable", true);
td.addEventListener("change", getsum());
});
}
function getsum() {
let sum = 0;
let cellnum = document.querySelectorAll("table tr td ~ td");
let count = cellnum.length - 1;
for (i = 0; i < count; i++) {
sum += parseInt(cellnum[i].innerHTML) || 0;
}
cellnum[count].innerHTML = sum;
}
editcell();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial;
}
[data-toggle="toggle"] {
display: none;
}
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class1">
<b>Class 1</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class1" id="class1" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Jack</td>
<td id="jack" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jill</td>
<td id="jill" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">
<label class="label" for="class2">
<b>Class 2</b>
<span>(Click this!)</span>
</label>
<input type="checkbox" name="class2" id="class2" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Joe</td>
<td id="joe" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jane</td>
<td id="jane" oninput="editcell()">
<span>0</span>
</td>
</tr>
<tr>
<td>Jim</td>
<td id="jim" oninput="editcell()">
<span>0</span>
</td>
</tr>
</tbody>
<tr>
<td style="font-weight:bold; text-align: center">Total</td>
<td id="total"></td>
</tr>
</table>

How to make a <tr> element in vuejs that contains <slot> with html

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.

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>

jquery to highlight the selected row and column in a table

I want to highlight the complete row and column of the selected cell in a html table using jquery. I came across many examples using CSS but could not find using jquery. Please suggest.
Please find the fiddle : http://jsfiddle.net/0w9yo8x6/70/
Below is the html code:
<div>
<table>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">
<br>Column1
</td>
<td bgcolor="grey">
<br>Column2
</td>
<td bgcolor="grey">
<br>Column3
</td>
<td bgcolor="grey">
<br>Column4
</td>
<td bgcolor="grey">
<br>Column5
</td>
</tr>
<tr>
<td bgcolor="grey" >Row1</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
</table></td></tr></table></div>
--EDIT--
I cannot simplify/modify my table structure as it is generating dynamically and retrieving the values from database and display's in cells. With my existing structure as i shown in the question / fiddle http://jsfiddle.net/0w9yo8x6/70/ i need to achieve the row and column highlight.
Thanks.

CSS-Tricks covered a small tutorial on how to do this with JS/jQuery here:
http://css-tricks.com/row-and-column-highlighting/
The best way is shown here:
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
#page-wrap { width: 600px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }
.slim { width: 88px; }
.hover { background-color: #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" width="100%">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>test</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

You can simplify your table like this:
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
Many people close trs and tds, but I choose not to, because those are optional closing tags in HTML5, and in my experience, they were never needed in HTML4. (Google's Style Guide also recommends omitting optional tags.)
All presentation styles should be done in a CSS style sheet, like this:
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
With jQuery, you can add a hover event to the table's tds, which toggle the hovered class for the td's parent row and all the tds in its column:
$('td').hover(function() {
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});
Fiddle
Edit
Since you can't change your layout, the highlighting functionality is a bit more difficult. In this case, you can use jQuery to change your multi-table layout to a single table:
$('table:first-child').replaceWith($('table', 'table:first-child').html());
$('table').each(function() {
var td= $('td', this);
if(td.length === 1) {
$(this).replaceWith(td.html());
}
});
This allows the highlighting code to work on your existing HTML.
New Fiddle

Categories