How can I get the relative header of a cell? - javascript

I have a very unusual table. I am struggling to be able to return the relative header of a specific element, as per this http://jsfiddle.net/yh6C6/
The table structure is similar to the following:
<table border>
<tbody>
<tr>
<th></th>
<th></th>
<th colspan="3">Parameter 1</th>
<th colspan="2">Parameter 2</th>
</tr>
<tr>
<td></td>
<td></td>
<td>
<div>
<div>State 1.1</div>
</div>
</td>
<td>
<div>
<div>State 1.2</div>
</div>
</td>
<td>
<div>
<div>State 1.3</div>
</div>
</td>
<td>
<div>
<div>State 2.1</div>
</div>
</td>
<td>
<div>
<div>State 2.2</div>
</div>
</td>
</tr>
<tr>
<th rowspan="2">Parameter 2</th>
<td>State 2.1</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<td>State 2.2</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<th rowspan="3">Parameter 3</th>
<td>State 3.1</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<td>State 3.2</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
<tr>
<td>State 3.3</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
<td contenteditable="true">-</td>
</tr>
</tbody>
</table>
Assuming you click on the 'contenteditable' cells, how can I return the row and column headers? Please check the jsfiddle provided above.

I've edited the fiddle to get the horizontal parameter.
Needed to add a class to each tr that contained a parameter name. Also coloured the selected tr to make it easier to visualize and debug what is being selected. Getting the vertical parameter name will be a different problem.

I was able to get it by doing the following:
$(document).ready(function () {
$('table').on('click', 'td[contenteditable]', function (e) {
// Horizontal Parameter
if ($(this).parent().has('th').length > 0) {
hParameter = $(this).parent().find('th').text();
} else {
hParameter = $(this).parent().prevAll('tr').has('th').first().find('th').text();
}
$('#horizontal-parameter').text('H: ' + hParameter);
// Vertical Parameter
var thLocator = [],
colCount = 1;
$table = $('table');
$table.find('tr:first th').each(function () {
for (var i = 0; i < this.colSpan; i++) {
thLocator.push(colCount);
}
colCount++;
});
vParameter = $table.find('tr:first th:nth-child(' + thLocator[$(this).index()] + ')').text();
$('#vertical-parameter').text('V: ' + vParameter);
});
});

Related

Change text color depending on table value Laravel

I have datatables on Laravel blade. The table has many rows and three columns which have last column value of salary. I have to choose the 15 people with the highest salary from the table.
The first 5 rows (1-5) of the text in the table should be green, the next 5 rows (6-11) should be yellow, the next 5 rows (11-15) should be red, and the remaining rows should be black as usual.
The codes were written using Laravel Blade and table DataTables.
#foreach($jamisoni as $pay)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:12px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-viqs{color:#fe0000;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
.tg .tg-xdmp{color:#0a790a;text-align:left;vertical-align:top}
.tg .tg-i99s{color:#ffcb2f;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax">ID</th>
<th class="tg-0lax">NAME</th>
<th class="tg-0lax">COUNT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-xdmp">1</td>
<td class="tg-xdmp">User 35</td>
<td class="tg-xdmp">100 000</td>
</tr>
<tr>
<td class="tg-xdmp">2</td>
<td class="tg-xdmp">User 01</td>
<td class="tg-xdmp">98 000</td>
</tr>
<tr>
<td class="tg-xdmp">3</td>
<td class="tg-xdmp">User 24</td>
<td class="tg-xdmp">95 000</td>
</tr>
<tr>
<td class="tg-xdmp">4</td>
<td class="tg-xdmp">User 26</td>
<td class="tg-xdmp">92 000</td>
</tr>
<tr>
<td class="tg-xdmp">5</td>
<td class="tg-xdmp">User 10</td>
<td class="tg-xdmp">91 000</td>
</tr>
<tr>
<td class="tg-i99s">6</td>
<td class="tg-i99s">User 11</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">7</td>
<td class="tg-i99s">User 22</td>
<td class="tg-i99s">85 000</td>
</tr>
<tr>
<td class="tg-i99s">8</td>
<td class="tg-i99s">User 24</td>
<td class="tg-i99s">84 000</td>
</tr>
<tr>
<td class="tg-i99s">9</td>
<td class="tg-i99s">User 55</td>
<td class="tg-i99s">83 000</td>
</tr>
<tr>
<td class="tg-i99s">10</td>
<td class="tg-i99s">User 65</td>
<td class="tg-i99s">82 000</td>
</tr>
<tr>
<td class="tg-viqs">11</td>
<td class="tg-viqs">User 40</td>
<td class="tg-viqs">70 000</td>
</tr>
<tr>
<td class="tg-viqs">12</td>
<td class="tg-viqs">User 39</td>
<td class="tg-viqs">69 000</td>
</tr>
<tr>
<td class="tg-viqs">13</td>
<td class="tg-viqs">User 29</td>
<td class="tg-viqs">65 000</td>
</tr>
<tr>
<td class="tg-viqs">14</td>
<td class="tg-viqs">User 44</td>
<td class="tg-viqs">64 000</td>
</tr>
<tr>
<td class="tg-viqs">15</td>
<td class="tg-viqs">User 58</td>
<td class="tg-viqs">63 000</td>
</tr>
<tr>
<td class="tg-0lax">16</td>
<td class="tg-0lax">User 70</td>
<td class="tg-0lax">58 000</td>
</tr>
<tr>
<td class="tg-0lax">17</td>
<td class="tg-0lax">User 71</td>
<td class="tg-0lax">55 000</td>
</tr>
</tbody>
</table>
Please help to solve this problem.
You can use $loop variable as condition to write nedded classes to your rows.
Blade loop:
#foreach($jamisoni as $pay)
<tr class="
#if($loop->iteration < 6)
{{ 'td-text-green' }}
#elseif($loop->iteration < 11)
{{ 'td-text-yellow' }}
#elseif($loop->iteration < 16)
{{ 'td-text-red' }}
#endif
">
<td>{{$loop->iteration}}</td>
<td>{{$pay->name}}</td>
<td>{{$pay->amount}}</td>
</tr>
#endforeach
CSS:
.td-text-green td {color: green;}
.td-text-yellow td {color: yellow;}
.td-text-red td {color: red;}
#php $i=1;#endphp
#foreach($jamisoni as $pay)
#php
if($i<=5){
$color='tg-xdmp';
}
else if($i>=6 && $i<=10){
$color='tg-i99s';
}
else if($i>11 && $i<=15){
$color='tg-viqs';
}
else{
$color='tg-0lax';
}
$i++;
#endphp
<tr>
<td class="{{$color}}">{{$loop->iteration}}</td>
<td class="{{$color}}">{{$pay->name}}</td>
<td class="{{$color}}">{{$pay->amount}}</td>
</tr>
#endforeach
Define a $color variable and assign the color value at once. Once done just use it inside your <td> tag by specifying the class.

calculating sum and subtraction of table row using jquery

i want to calculate sum of all columns, and subtraction of col1 and col2 only, i found few examples online to add row data but how i can perform both action on one row. using class or id name.
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>
jquery:
function calculate(){
var col1=$('.col1').text();
var col2=$('.col2').text();
var col3=$('.col3').text();
var sum= col1+col2+col3;
var subtract= col1-col2;
$(".sum").text(sum);
$(".subtract").text(subtract);
}
JSFiddle
Loop through all the table tr and use .find() on the columns you need. I added .col on each of the value columns so we won't need to specify the three columns on addition.
function calculate() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).html());
});
difference = parseFloat($(this).find(".col1").html()) - parseFloat($(this).find(".col2").html());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1">1</td>
<td class="col col2">2</td>
<td class="col col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1">43</td>
<td class="col col2">432</td>
<td class="col col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick="calculate()">calculate</button>
Here's the answer using input fields;
$(document).ready(function() {
$("#calculate").on("click", function() {
var sum;
var difference;
$("tbody tr").each(function() {
sum = 0;
difference = 0;
$(this).find(".col").each(function() {
// console.log($(this).html());
sum += parseFloat($(this).find("input").val());
});
difference = parseFloat($(this).find(".col1").find("input").val()) - parseFloat($(this).find(".col2").find("input").val());
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(difference);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th>column two</th>
<th>column three</th>
<th>sum of all columns</th>
<th>subtraction</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col col1"><input value="1" /></td>
<td class="col col2"><input value="2" /></td>
<td class="col col3"><input value="3" /></td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col col1"><input value="43" /></td>
<td class="col col2"><input value="432" /></td>
<td class="col col3"><input value="33" /></td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate">Sum
</button>
Please check this working example.
var col1=0,col2=0,col3=0,sum=0,subtract=0;
function calculate(){
$(".jsTableBody tr").each(function(){
col1=$(this).find('.col1').text();
col2=$(this).find('.col2').text();
col3=$(this).find('.col3').text();
sum= parseInt(col1) + parseInt(col2)+ parseInt(col3);
console.log(sum);
subtract= parseInt(col1)-parseInt(col2);
$(this).find(".sum").html(sum);
$(this).find(".subtract").html(subtract);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sum_table" width="450" border="1">
<thead>
<tr>
<th>column one</th>
<th >column two</th>
<th >column three</th>
<th >sum of all columns</th>
<th >subtraction</th>
</tr>
</thead>
<tbody class="jsTableBody">
<tr>
<td class="col1">1</td>
<td class="col2">2</td>
<td class="col3">3</td>
<td><span class="sum"></span> </td>
<td><span class="subtract"></span> </td>
</tr>
<tr>
<td class="col1">43</td>
<td class="col2">432</td>
<td class="col3">33</td>
<td> <span class="sum"></span> </td>
<td> <span class="subtract"></span> </td>
</tr>
</tbody>
</table>
<button id="calculate" onclick = "calculate()">calculate</button>

Find and display only the highest score in the table

I was hoping you could help me with my code..
I have an HTML table with dynamically added data.
So, I wanted to create a filter for it so the same test taken by the same person be removed and display only one per person and get only the highest score.
<table class="test-table">
<thead>
<tr role="row">
<th> Name </th>
<th> Test </th>
<th> Date </th>
<th> Score </th>
</thead>
<tbody>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 2</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
</tbody>
</table>
So it should only display Jonh Doe's Exam 1 with the score of 8.
But show both of Jane Doe's because it's two different exams..
Now, I have a script that search for the duplicates but I'm currently stuck..
var nTds = document.querySelectorAll('[title="Name"]'),
tTds = document.querySelectorAll('[title="Test"]'),
test = [],
names = [];
for (var i = 0; i < nTds.length; i++) {
names.push(nTds[i].textContent);
}
for (var i = 0; i < tTds.length; i++) {
test.push(tTds[i].textContent);
}
const nCount = names =>
names.reduce((a, b) =>
Object.assign(a, {
[b]: (a[b] || 0) + 1
}), {})
const tCount = test =>
test.reduce((a, b) =>
Object.assign(a, {
[b]: (a[b] || 0) + 1
}), {})
const duplicates = dict =>
Object.keys(dict).filter((a) => dict[a] > 1)
console.log(duplicates(tCount(test)))
console.log(duplicates(nCount(names)))
Thank you so much! any help would be appreciated..
With a checkbox button you can show/hide as you please. Let me know what you don't understand.
function duplicate_hide()
{
var table_rows = document.querySelectorAll('tbody tr');
var unique = {};
var selection = ["Name", "Test", "Score"];
for (row of table_rows)
{
var temp = [];
for (select of selection)
{
temp.push(row.querySelector(`td[title="${select}"]`));
}
// Destructuring assignment
var [the_name, the_test, the_score] = temp;
the_name = the_name.innerHTML;
the_test = the_test.innerHTML;
the_score = the_score.innerHTML == " " ? 0 : the_score.innerHTML;
if (the_name in unique && the_test in unique[the_name])
{
//same test, saved score is lower than current score, hide previous row
if (+unique[the_name][the_test].score < +the_score)
{
unique[the_name][the_test].row.className = "hidden";
unique[the_name][the_test].score = the_score;
unique[the_name][the_test].row = row;
}
else
{
row.className = "hidden";
}
}
else
{
// Create new object if it doesn't exist on name
if (!(the_name in unique))
{
unique[the_name] = {};
}
unique[the_name][the_test] = {score: the_score, row};
}
}
}
function duplicate_show()
{
var table_rows = document.querySelectorAll('tbody tr');
for (row of table_rows)
{
row.className = "";
}
}
function duplicate_check(event)
{
if (event.target.checked)
{
duplicate_hide();
}
else
{
duplicate_show();
}
}
.hidden {
display: none;
}
<div>
<input type="checkbox" onchange="duplicate_check(event)" /> Toggle Me
</div>
<table class="test-table">
<thead>
<tr role="row">
<th> Name </th>
<th> Test </th>
<th> Date </th>
<th> Score </th>
<th> something else </th>
</thead>
<tbody>
<tr class='odd'>
<td title="Name">John Doe</td>
<td title="Test">exam 1</td>
<td title="Date">03/08/2017</td>
<td title="Score">4</td>
</tr>
<tr class='even'>
<td title="Name">John Doe</td>
<td title="Test">exam 1</td>
<td title="Date">03/08/2017</td>
<td title="Score">5</td>
</tr>
<tr class='odd'>
<td title="Name">John Doe</td>
<td title="Test">exam 2</td>
<td title="Date">03/08/2017</td>
<td title="Score">7</td>
</tr>
<tr class='even'>
<td title="Name">Wendy Doe</td>
<td title="Test">exam 1</td>
<td title="Date">03/08/2017</td>
<td title="Score">7</td>
</tr>
<tr class='odd'>
<td title="Name">Wendy Doe</td>
<td title="Test">exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">4</td>
</tr>
<tr class='even'>
<td title="Name">Wendy Doe</td>
<td title="Test">exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
</tbody>
</table>
please see the demo.If you want add a checkbox to show the rest scores,this code doesn't helped you,and you must grouped the data via [name,test] before render.so you must provide multi table instead,not one table only.the strcture may be like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Test</th>
<th>Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td>
<table>
<thead>
<tr>
<th>Date</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>02/11/2017</td>
<td>8</td>
</tr>
<tr>
<td>02/11/2017</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<table class="test-table">
<thead>
<tr role="row">
<th> Name</th>
<th> Test</th>
<th> Date</th>
<th> Score</th>
</thead>
<tbody>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 2</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
</tbody>
</table>
<script type="text/babel">
let highest = {};
Array.from(document.querySelectorAll('table tbody tr')).forEach((exam) => {
const get = (name) => {
return exam.querySelector(`[title="${name}"]`).textContent;
};
var [name, test, score]=[get('Name'), get('Test'), parseInt(get('Score'))];
let key = [name, test];
if (highest[key] >= score) {
exam.parentNode.removeChild(exam);
return;
}
highest[key] = score;
});
</script>
You seem to be making it too complex. Just loop over the rows in the table body and collect name, test, score and the row it's in. If you encounter a combination more than once, hide the lower score or show the higher score and update the saved score and row.
var rows = document.querySelector('table').tBodies[0].rows;
var seen = {};
[].forEach.call(rows, row => {
var name = row.cells[0].textContent,
test = row.cells[1].textContent,
score = Number(row.cells[3].textContent);
if (seen[name] && seen[name].hasOwnProperty(test)){
if (seen[name][test].score > score) {
row.style.display = 'none';
} else {
seen[name][test].row.style.display = 'none';
seen[name][test] = {score: score, row: row};
}
} else {
seen[name] = {[test]:{score: score, row: row}};
}
})
<table class="test-table">
<thead>
<tr role="row">
<th> Name </th>
<th> Test </th>
<th> Date </th>
<th> Score </th>
</thead>
<tbody>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">13</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 2</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
</tbody>
</table>
In some recent browsers, NodeLists (such as HTMLCollections like rows and those returned by querySelectorAll) have a forEach method that makes it simpler.
This also uses computed property names, which can be avoided but takes a couple more lines of code. If they're not supported, likely nor are arrow functions. Neither are an issue and are easily replaced.

Aligning data vertically in td elements for horizontally connected rows using jquery

I've html in the below format.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<script type="text/javascript">
$(document).ready(function(){
var dups = $('.comps + .comps');
dups.remove();
});
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
</script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="CSSTableGenerator" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
<tr/>
<tr/>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
<tr>
</table>
</div>
In the above jquery function, list1 and list2 are horizontally connected to lqwasc10 and lqwasc11 respectively. Is there a way I can align list1 and list2 vertically along with existing td elements of Components and Properties in their respective orders.
I've tried a lot and couldn't get hold of the logic. It would be great if someone can answer.
I'm expecting data in the format as shown in the screenshot.
You can merely add the desired <td>s just after removing duplicates, like this:
var list1 = [1,2,3,4,5,6];
var list2 = [6,5,4,3,2,1];
$(document).ready(function(){
$('.comps + .comps').remove();
$('.myTable tr').each(function(i) {
if (i > 0) {
$(this)
.append('<td>' + list1[i - 1] + '</td>')
.append('<td>' + list2[i - 1] + '</td>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="serverSet">
<h2>JH Storefront servers</h2>
<table border="1" class="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="servers"> lqwasc10 </th>
<th class="servers"> lqwasc11 </th>
</tr>
<tr>
<td class="comps">DeliveryMethodsRepository</td>
<td class="props">externalCacheBatchInfoSize</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="comps">InventoryManager</td>
<td class="props">itemType</td>
</tr>
<tr>
<td class="comps">InventoryManager</td>
<td class="props">maxConcurrentUpdateRetries</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="comps">CatalogTools</td>
<td class="props">queryASAFFabrics</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">loggingDebug</td>
</tr>
<tr>
<td class="comps">CatalogTools</td>
<td class="props">outOfStockCode</td>
</tr>
</table>
</div>
Please note that this snippet works only after correcting HTML errors: <tr> inconsistency (already noticed by comments), duplicate class attribute on <table>.

How to get table header cell's name when am using colspan peoprty?

here I want to get the header cells name from table when am clicking on td who has specific class and colspan property, means when am clicking on td who has colspan property that should show all it's header cells name covered by it
like bellow snap
i have a code that is returning only the first header cell name the script code is as bellow
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var rowheader = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
alert("header=" + rowheader.innerHTML);
});
HTML is as bellow
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4" class="displaysingledata>row1</td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2" class="displaysingledata"></td>
<td id="1_3"></td>
<td class="displayMultipledata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7" class="displaysingledata"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10" class="displaysingledata">row2</td>
<td id="2_0"></td>
<td id="2_1" class="displaysingledata"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displayMultipledata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
for a single cell the script i have included that is working,i need to deal with colspan which covers multiple header cells
You can use the colspan to define the number of headers you'll need.
Be aware that the index of the click cell. For example, in row1, there is a merged cell, this counts as one! Not two!
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan = $(this).attr('colspan'),
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Alternativ that works on all cells
$('#example').on('click', 'td:not(:first-of-type)', function (e) {
var colspan = 1,
index = $(this).index(),
prevCells = $(this).prevAll(),
headerTxt = '';
if( $(this).attr('colspan') ) {
colspan = $(this).attr('colspan');
}
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
index += ( $(this).attr('colspan') - 1 );
}
});
for(var i=0; i<colspan; i++ ) {
headerTxt += $('#example thead tr th:eq('+(index+i)+')').text()+"\n";
}
alert( headerTxt );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>
Use $(this).attr('colspan') to find the colspan number for td and iterate loop through th cells to get th cell values. Please check below snippet for more understanding.
$('#example').on('click', ' td.displaydata', '.multiple', function (e) {
var colspan_number = parseInt($(this).attr('colspan'));
var prevCells = $(this).prevAll();
var previousColSpan = 0;
$.each(prevCells, function() {
if( $(this).attr('colspan') ) {
previousColSpan += (parseInt($(this).attr('colspan'))-1);
}
});
var total_cells = 1;
if(parseInt(colspan_number)>0){
total_cells = colspan_number;
}
var rowheaders = '';
for(var i=0;i<total_cells;i++){
rowheaders += e.delegateTarget.tHead.rows[0].cells[(this.cellIndex + previousColSpan + i)].innerHTML + "\n";
}
alert("headers : \n" + rowheaders);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="display" id="example">
<thead>
<tr>
<th>Rooms</th>
<th>08:00-09:00</th>
<th>09:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-13:00</th>
<th>13:00-14:00</th>
<th>14:00-15:00</th>
<th>15:00-16:00</th>
<th>16:00-17:00</th>
</tr>
</thead>
<tbody>
<tr>
<td id="1_4">row1</td>
<td class="displaydata " colspan="2">
<span id="id_1_0" class="multiple" draggable="true"></span>
</td>
<td id="1_2"></td>
<td id="1_3"></td>
<td class="displaydata" colspan="2">
<span id="id_1_4" class="multiple" draggable="true"></span>
</td>
<td id="1_6"></td>
<td id="1_7"></td>
<td id="1_8"></td>
</tr>
<tr>
<td id="2_10">row2</td>
<td id="2_0"></td>
<td id="2_1"></td>
<td id="2_2"></td>
<td id="2_3"></td>
<td class="displaydata" colspan="4">
<span id="id_2_4" class="multiple" draggable="true"></span>
</td>
<td id="2_8"></td>
</tr>
</tbody>
</table>

Categories