pivot an array in javascript - javascript

const supply =[
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX01",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX01Q",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX10",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX10Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX02Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX03",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX03Q",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX30",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX30Q",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX04Q",VALUE:200}]
I'm trying to pivot the above array so I can output it in a similar way to the table I have below. My first inclination is to make a nest of .foreach loops and separate them into individual arrays and parse over them. Is that how you would do it?
I would like to learn a method for the best way transforming the array into an array that could generate the style of table I need.
Thanks
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;}
.tg .tg-yw4l{vertical-align:top}
.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-9hbo{font-weight:bold;vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l"></th>
<th class="tg-amwm" colspan="2">A</th>
<th class="tg-amwm" colspan="2">B</th>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-9hbo">Cat1</td>
<td class="tg-9hbo">Cat2</td>
<td class="tg-9hbo">Cat1</td>
<td class="tg-9hbo">Cat2</td>
</tr>
<tr>
<td class="tg-9hbo" rowspan="2">100</td>
<td class="tg-yw4l">MX01</td>
<td class="tg-yw4l">MX01Q</td>
<td class="tg-yw4l">MX10</td>
<td class="tg-yw4l">MX10Q</td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">MX02Q</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-9hbo" rowspan="2">200</td>
<td class="tg-yw4l">MX03</td>
<td class="tg-yw4l">MX03Q</td>
<td class="tg-yw4l">MX30</td>
<td class="tg-yw4l">MX30Q</td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">MX04Q</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>

const supply =[
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX01",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX01Q",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX10",VALUE:100},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX10Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX02Q",VALUE:100},
{FAMILY:"A",CATEGORY:"Cat1",PRODUCT:"MX03",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX03Q",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat1",PRODUCT:"MX30",VALUE:200},
{FAMILY:"B",CATEGORY:"Cat2",PRODUCT:"MX30Q",VALUE:200},
{FAMILY:"A",CATEGORY:"Cat2",PRODUCT:"MX04Q",VALUE:200}];
// get the list of unique families
var family = supply.map(function(item)
{
return item.FAMILY;
}).filter(function(value, index, self)
{
return self.indexOf(value) === index; // remove duplicates
});
// get the list of unique categories
var category = supply.map(function(item)
{
return item.CATEGORY;
}).filter(function(value, index, self)
{
return self.indexOf(value) === index; // remove duplicates
});
// get the list of unique values
var value = supply.map(function(item)
{
return item.VALUE;
}).filter(function(value, index, self)
{
return self.indexOf(value) === index; // remove duplicates
});
function getProduct(family, category, value)
{
return supply.filter(function(item)
{
return item.FAMILY === family && item.CATEGORY === category && item.VALUE === value;
}).map(function(item)
{
return item.PRODUCT;
});
}
// build the header row with families
var rowFamily = '<tr><th> </th>' + family.map(function(item)
{
return '<th colspan="' + category.length + '">' + item + '</th>';
}).join("") + '</tr>';
// build the subheader row with categories
var rowCategory = '<tr><th> </th>' + family.map(function(itemF)
{
return category.map(function(itemC)
{
return '<th>' + itemC + '</th>';
}).join("");
}).join("") + '</tr>';
// show 1 row for each value
var rowValues = value.map(function(itemV)
{
return '<tr><th>' + itemV + '</th>' + family.map(function(itemF)
{
return category.map(function(itemC)
{
return '<td>' + getProduct(itemF,itemC,itemV).join('<br>') + '</td>';
}).join("");
}).join("") + '</tr>';
}).join("");
// show them all in the table
document.getElementById('tbl').innerHTML = rowFamily + rowCategory + rowValues;
<table id="tbl" border=1 bordercolor=black cellspacing=0></table>

Related

Adding rows to table with jquery

I have a html table like this:
Group Amount
x 3
x 1
test 2
test 5
But I would like to have this:
Group Amount
x 3
x 1
sum x 4
test 2
test 5
sum test 7
I already can add a row at a index:
$('.mytable > tbody > tr').eq(i-1).after(html);
But how could I get the index and the sum with jquery?
This will do what you need, for all future groups, with the values in any order, but I'd strongly recommend doing all this on the server when you first get the information....
var groups = {};
// get the sums of all the groups in the table, and the index of the last row of each
$(".mytable tbody tr").each(function(i) {
var group = $(this).find("td").eq(0).text();
var value = parseInt($(this).find("td").eq(1).text(), 10);
if (groups.hasOwnProperty(group)) {
groups[group].sum += value;
}
else {
groups[group] = {
sum: value
};
}
groups[group].index = i;
});
// convert the group information into an array so it can be sorted...
var groupArray = [];
for(var group in groups) {
groups[group].name = group;
groupArray.push(groups[group]);
}
// sort the groups in reverse index order
groupArray = groupArray.sort(function(a, b) {
return b.index - a.index;
});
// parse the groups of values and add them to the table, after the final row of each group
for (var i = 0, l = groupArray.length; i < l; i++) {
$(".mytable tbody tr").eq(groupArray[i].index).after("<tr><td>Sum " + groupArray[i].name + "</td><td>" + groupArray[i].sum + "</td></tr>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="mytable">
<thead>
<tr>
<th>Group</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>3</td>
</tr>
<tr>
<td>x</td>
<td>1</td>
</tr>
<tr>
<td>test</td>
<td>2</td>
</tr>
<tr>
<td>test</td>
<td>5</td>
</tr>
</tbody>
</table>
Please try this one.
var sums = [];
$("table.mytable tbody tr").each(function(index) {
var label = $(this).find("td:first-child").html();
var value = parseInt($(this).find("td:last-child").html());
if (sums.length == 0 || sums[sums.length - 1].label != label)
sums.push({
index: index,
label: label,
sum: value
});
else
sums[sums.length - 1].sum += value;
});
for (var i = 0; i < sums.length; i++)
$('table.mytable > tbody > tr').eq(sums[i].index + i).after("<tr><td>" + sums[i].label + "</td><td>" + sums[i].sum + "</td></tr>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="mytable">
<thead>
<tr>
<th>Group</th>
<th>Amount</th>
</tr>
<thead>
<tbody>
<tr>
<td>x</td>
<td>3</td>
</tr>
<tr>
<td>x</td>
<td>1</td>
</tr>
<tr>
<td>test</td>
<td>2</td>
</tr>
<tr>
<td>test</td>
<td>5</td>
</tr>
</tbody>
</table>
The row index you can use de .rowIndex property of the table row element ($tr[0].rowIndex).
The sum, you would have to iterate over the elements, if you elements are ordered by group:
var group, sum = 0;
$('table tr').each(function () {
var $tr = $(this);
if (!group)
group = $tr.children('td:first-child').text();
sum += parseFloat($tr.children('td:last-child').text());
if ($tr.next().children('td:first-child').text() !== group) {
$tr.after('<tr><td>sum of ' + group + '</td><td>' + sum + '</td></tr>');
sum = 0;
group = null;
}
});
Although you can achieve the desired result with that, I encourage you not to do this. You are strongly relying on the data and HTML structure. Your code is going to be fragile, hard to maintain and, probably, with poor performance.

How to read HTML <table> and sort the table content?

I have a html table with three columns [Title, Category, Sub-Category] and multiple rows . And I want to read the entire table content and make it categorized as below output.
My <html> table content is like this.
Title Category Sub
T1 C1 S1
T2 C2 S2
T3 C2 S3
T3 C1 S1
T2 C1 S3
T1 C2 S3
Here is the output format what I really need. I just want to print the above html table content in the below out put format.
T1 :
C1 : S1
C2 : S3
T2 :
C2 : S2
C1 : S3
T3 :
C2 : S3
C1 : S3
[Title]
[Category] :[Sub-Category]
Please help me.
Assuming the table has this code:
<table>
<thead>
<tr>
<th>Title</th>
<th>Category</th>
<th>Sub</th>
</tr>
</thead>
<tbody>
<tr>
<th>T1</th>
<td>C1</td>
<td>S1</td>
</tr>
<tr>
<th>T2</th>
<td>C2</td>
<td>S2</td>
</tr>
<tr>
<th>T3</th>
<td>C2</td>
<td>S3</td>
</tr>
<tr>
<th>T3</th>
<td>C1</td>
<td>S1</td>
</tr>
<tr>
<th>T2</th>
<td>C1</td>
<td>S3</td>
</tr>
<tr>
<th>T1</th>
<td>C2</td>
<td>S3</td>
</tr>
</tbody>
</table>
We can use jQuery to get output like this:
$(document).ready(function(){
$("table").hide();
$("body").append("<textarea></textarea>");
var s = "";
$("tbody tr").each(function(){
s += $(this).find("th").html() + ":\n";
s += $(this).find("td:nth-child(2)").html() + ": " + $(this).find("td:nth-child(3)").html() + "\n\n";
});
$("textarea").val(s);
});
Fiddle: http://jsfiddle.net/praveenscience/9ueervw4/
The below code, you get a JavaScript object which is associative!
$(document).ready(function(){
$("table").hide();
$("body").append("<textarea></textarea>");
var s = {};
$("tbody tr").each(function(){
if (!s[$(this).find("th").html()])
s[$(this).find("th").html()] = [];
s[$(this).find("th").html()].push($(this).find("td:nth-child(2)").html() + ": " + $(this).find("td:nth-child(3)").html());
});
});
Try using associative arrays in javascript/jQuery: DEMO
var tableRowArray = $('table tr');
var titleArray = [];
var mainArray = {};
// build an associative array of the values int he table
tableRowArray.each(function(){
if($(this).children('th').length == 0) {
var tempTitle = $(this).children('td').eq(0).text();
if(mainArray[tempTitle]){
mainArray[tempTitle][$(this).children('td').eq(1).text()] = $(this).children('td').eq(2).text();
}
else {
titleArray.push(tempTitle);
mainArray[tempTitle] = {};
mainArray[tempTitle][$(this).children('td').eq(1).text()] = $(this).children('td').eq(2).text();
}
}
});
// print the formatted associative array to the page
$('body').append("<p></p>");
var formattedString = "";
$.each(titleArray, function(index, value){
formattedString += "<b>" + value + " : </b><br/>";
for(var key in mainArray[value]) {
formattedString += " " + key + " : " + mainArray[value][key] + "<br/>";
}
});
$('p').html(formattedString);
Basically, we create an associative array from your table and then the next piece iterates through the array to print it in the format you specified (you may need to edit the set up of the array if you table structure varies from what I used the in JSfiddle).
The below example will give you the output you want.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function () {
var outputtemp = "<table>";
$("#tbl1 tr").not("tr th").each(function () {
outputtemp += "<tr>"
var i = 0;
$(this).find("td").each(function () {
if (i == 0)
outputtemp += "<td>" + $(this).text() + ":</td></tr><tr>";
else if (i == 1)
outputtemp += "<td></td><td>" + $(this).text() + ":</td>";
else
outputtemp += "<td>" + $(this).text() + "</td>";
i++;
});
outputtemp += "</tr>"
});
outputtemp += "</table>"
$(".output").html(outputtemp);
});
</script>
</head>
<body>
<table id="tbl1">
<tr>
<th>
Title
</th>
<th>
Category
</th>
<th>
Sub
</th>
</tr>
<tr>
<td>
T1
</td>
<td>
C1
</td>
<td>
S1
</td>
</tr>
<tr>
<td>
T2
</td>
<td>
C2
</td>
<td>
S2
</td>
</tr>
<tr>
<td>
T3
</td>
<td>
C3
</td>
<td>
S3
</td>
</tr>
</table>
<div class="output">
</div>
</body>
</html>
Get the data using getElementbyId and then you may apply any operation on that data when you have whole data in js variables.

JS - Help - Grouping Rows

I need to group these rows that are being returned from a data base. Unfortunately in the data base they create a new complete record for each contact information.
VIEW:
Name TZ Office Cell Home Email
Andres 2442 3667 - - - -
Andres - 999-99-99 - - -
Andres - - 999-99-99 - -
Andres - - - 999-99-99 -
Andres - - - - gchaves#itconvergence.com
HTML CODE
<table id="gptable">
<thead>
<td>Name</td>
<td>TZ</td>
<td>Office</td>
<td>Cell</td>
<td>Home</td>
<td>Email</td>
</thead>
<tbody>
<tr>
<td>Andres</td>
<td>2442 3667</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Andres</td>
<td>-</td>
<td>999-99-99</td>
<td>-</td>
<td >-</td>
<td >-</td>
</tr>
<tr>
<td>Andres</td>
<td>-</td>
<td>-</td>
<td>999-99-99</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Andres</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>999-99-99</td>
<td>-</td>
</tr>
<tr>
<td>Andres</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>gchaves#itconvergence.com</td>
</tr>
</tbody>
So how can I group all this rows in just one ? Fiddle.
Storing each field in the database as an individual record is very bad practice. But if you cannot change it, something like this should work in jQuery:
$(document).ready(function() {
var str = first = "";
$("#gptable tbody").each(function(l, tbody) {
$(this).find("tr").each(function(i, tr) {
$(tr).find("td").each(function(j, td) {
if($(this).html() != "-" && j != 0) {
str += "<td>" + $(this).html() + "</td>";
} else if(first == "") {
first = "<td>" + $(this).html() + "</td>";
}
});
});
$('#gptable tbody').empty();
$('#gptable tbody').after("<tr>" + first + str + "</tr>");
});
});
Here's your fiddle: http://jsfiddle.net/65wYn/2/
I think yes, you can group all of them into one row.
Try this :
var $body = $('#gptable').find('tbody');
var $rows = $body.find('tr');
var newBody = document.createElement('tr');
var indexCounter = 1;
jQuery.each($rows, function (i, item) {
if (i === 0) {
$(newBody).append('<td>' + $(item).find('td').get(0).innerHTML + '</td>');
}
$(newBody).append('<td>' + $(item).find('td').get(indexCounter).innerHTML + '</td>');
indexCounter++;
});
$('#gptable').find('tbody').empty().append(newBody);
Then, you got your grouped row:
Name TZ Office Cell Home Email
Andres 2442 3667 999-99-99 999-99-99 999-99-99 gchaves#itconvergence.com
I hope it helps.
JSFiddle sample: http://jsfiddle.net/amontellano/YZtkf/

Proper rows not getting colored

My rows are not getting colored properly"
Please have a look at my HTML output:
<table id="mytable" cellspacing="0" cellpadding="5">
<tbody>
<tr class="tableheader">
<th>Name</th>
<th>Code</th>
<th>Value</th>
<th>Bid</th>
<th>Offer</th>
</tr>
<tr class="rowoddcolor">
<td>Apple</td>
<td>APPL</td>
<td>111</td>
<td>112</td>
<td>110</td>
</tr>
<tr class="tablecontent">
<td>Microsoft</td>
<td>MSFT</td>
<td>78</td>
<td>70</td>
<td>75</td>
</tr>
<tr class="rowevencolor">
<td>Google</td>
<td>GOGL</td>
<td>101</td>
<td>98</td>
<td>102</td>
</tr>
<tr class="tablecontent">
<td>Nokia</td>
<td>NOK</td>
<td>10</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="rowoddcolor">
<td>Samsung</td>
<td>SAMS</td>
<td>89</td>
<td>86</td>
<td>90</td>
</tr>
<tr class="tablecontent">
<td>IntelCorporation</td>
<td>INTC</td>
<td>111</td>
<td>112</td>
<td>110</td>
</tr>
</tbody>
</table>
Now only the 1st and 5th row getting colored? why not 3rd row?
updated code:
function tablerows(id){
if(document.getElementsByTagName){
var tableid = document.getElementById(id);
var rows = tableid.getElementsByClassName('tablecontent');
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "rowevencolor";
}else{
rows[i].className = "rowoddcolor";
}
}
}
}
$(document).ready(function() {
$.getJSON('table.json',function(data){
$('#mytable').empty();
var html = '';
html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
for (var i=0, size=data.length; i<size;i++) {
html += '<tr class="tablecontent"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
+ data[i].value+ '</td><td class="bid">'
+data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
}
$('#mytable').append(html);
tablerows('mytable');
});
});
I am creating html through jquery consuming json. Table is getting created properly. Now through javascript, i am styling my alternate rows to different color and header should be in different color. This is my first question. Please see below my script:
function tablerows(id){
if(document.getElementsByTagName){
var tableid = document.getElementById(id);
var rows = tableid.getElementById("tablecontent");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "rowevencolor";
}else{
rows[i].className = "rowoddcolor";
}
}
}
}
$(document).ready(function() {
$.getJSON('table.json',function(data){
$('#mytable').empty();
var html = '';
html += '<tr class="tableheader"><th>Name</th><th>Code</th><th>Value</th><th>Bid</th><th>Offer</th></tr>';
for (var i=0, size=data.length; i<size;i++) {
html += '<tr id="tablecontent"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
+ data[i].value+ '</td><td class="bid">'
+data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
}
$('#mytable').append(html);
});
$(function(){
tablerows('mytable');
});
});
But my rows are not getting styled. Please tell me where is the problem.
Below is css code as well:
.rowoddcolor{
background-color:#FFFFFF;
}
.rowevencolor{
background-color:#D3D3D3;
}
I believe the function "tablerows" is getting executed before the build of table. So put that code after the append method.
Example :
$(document).ready(function() {
$.getJSON('table.json',function(data){
// existing stuff
$('#mytable').append(html);
tablerows('mytable');
});
});
Also the easiest way add the color class on alternating would be :
$('#mytable tr:even').addClass("rowevencolor");
$('#mytable tr:odd').addClass("rowoddcolor");
A few things:
First, Element ID's should be unique. Do not give every tr the same id tablecontent.
After that's fixed, you can ditch the entire helper function tablerows() as it is redundant and that logic can be moved to where you are building the table, i.e.:
for (var i=0, size=data.length; i<size;i++) {
html += '<tr class="tablecontent row' + (i % 2 ? 'even' : 'odd') + 'color"><td class="name">'+ data[i].name+ '</td><td class="code">'+ data[i].code+ '</td><td class="value">'
+ data[i].value+ '</td><td class="bid">'
+ data[i].bid+'</td><td class="offer">'+data[i].offer+'</td></tr>';
}
Or simply use psuedo-selectors in your CSS as recommended by Kundan
The reason why your code is not highlighting table row #3 is because the result of getElementsByClassName is a NodeList, not an Array.
You will thus need to convert the NodeList to an Array before using the indexing operator for random access.
e.g.
var rowsList = tableid.getElementsByClassName('tablecontent');
var rows = Array.prototype.slice.call(rowsList);
for (i = 0; i < rows.length; i++)
// ...
Here is a working fiddle
However, as per Kundan's answer, it seems strange why you wouldn't use a jQuery solution, as it is much less work. jQuery fiddle here

Getting the table row values with jQuery

I am trying to get the values from an HTML table row. When I click on the table row delete button, I want to put those values on variables to send to the server. I have found something from here that looks like what I need, but when I put it together for my scenario, it does not work.
Here is the table HTML:
<table id='thisTable' class='disptable' style='margin-left:auto;margin-right:auto;' >
<tr>
<th>Fund</th>
<th>Organization</th>
<th>Access</th>
<th>Delete</th>
</tr>
<tr>
<td class='fund'>100000</td><td class='org'>10110</td><td>OWNED</td><td><a class='delbtn'ref='#'>X</a></td></tr>
<tr><td class='fund'>100000</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
<tr><td class='fund'>170252</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
<tr><td class='fund'>100000</td><td class='org'>67150</td><td>PENDING ACCESS</td><td><a class='delbtn' href='#'>X</a></td></tr>
<tr><td class='fund'>100000</td><td class='org'>67120</td><td>PENDING ACCESS</td><td><a class='delbtn' href='#'>X</a>
</td>
</tr>
and here is the jQuery:
var tr = $('#thisTable').find('tr');
tr.bind('click', function(event) {
//var values = '';
// tr.removeClass('row-highlight');
var tds = $(this).addClass('row-highlight').find('td');
$.each(tds, function(index, item) {
values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
alert(values);
});
alert(values);
});
What am I doing wrong? I keep looking at examples but I cant seem to make this work.
Try this:
jQuery('.delbtn').on('click', function() {
var $row = jQuery(this).closest('tr');
var $columns = $row.find('td');
$columns.addClass('row-highlight');
var values = "";
jQuery.each($columns, function(i, item) {
values = values + 'td' + (i + 1) + ':' + item.innerHTML + '<br/>';
alert(values);
});
console.log(values);
});
DEMO
Give something like this a try:
$(document).ready(function(){
$("#thisTable tr").click(function(){
$(this).find("td").each(function(){
alert($(this).html());
});
});
});​
Here is a fiddle of the code in action: https://jsfiddle.net/YhZsW/
All Elements
$('#tabla > tbody > tr').each(function() {
$(this).find("td:gt(0)").each(function(){
alert($(this).html());
});
});
Here is a working example. I changed the code to output to a div instead of an alert box. Your issue was item.innerHTML I believe. I use the jQuery html function instead and that seemed to resolve the issue.
<table id='thisTable' class='disptable' style='margin-left:auto;margin-right:auto;' >
<tr>
<th>Fund</th>
<th>Organization</th>
<th>Access</th>
<th>Delete</th>
</tr>
<tr>
<td class='fund'>100000</td><td class='org'>10110</td><td>OWNED</td><td><a class='delbtn'ref='#'>X</a></td></tr>
<tr><td class='fund'>100000</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
<tr><td class='fund'>170252</td><td class='org'>67130</td><td>OWNED</td><td><a class='delbtn' href='#'>X</a></td></tr>
<tr><td class='fund'>100000</td><td class='org'>67150</td><td>PENDING ACCESS</td><td><a class='delbtn' href='#'>X</a></td></tr>
<tr><td class='fund'>100000</td><td class='org'>67120</td><td>PENDING ACCESS</td><td><a class='delbtn' href='#'>X</a>
</td>
</tr>
</table>
<div id="output"></div>​
the javascript:
$('#thisTable tr').on('click', function(event) {
var tds = $(this).addClass('row-highlight').find('td');
var values = '';
tds.each(function(index, item) {
values = values + 'td' + (index + 1) + ':' + $(item).html() + '<br/>';
});
$("#output").html(values);
});
$(document).ready(function () {
$("#tbl_Customer tbody tr .companyname").click(function () {
var comapnyname = $(this).closest(".trclass").find(".companyname").text();
var CompanyAddress = $(this).closest(".trclass").find(".CompanyAddress").text();
var CompanyEmail = $(this).closest(".trclass").find(".CompanyEmail").text();
var CompanyContactNumber = $(this).closest(".trclass").find(".CompanyContactNumber").text();
var CompanyContactPerson = $(this).closest(".trclass").find(".CompanyContactPerson").text();
// var clickedCell = $(this);
alert(comapnyname);
alert(CompanyAddress);
alert(CompanyEmail);
alert(CompanyContactNumber);
alert(CompanyContactPerson);
//alert(clickedCell.text());
});
});

Categories