Alexander Dixon
Reputation: 874
jQuery iterate table column and rows to build lists
I am trying to build a function that will alleviate some manual aspect to a project. The client has provided me with a list in Excel which I have converted to a table (thanks to Notepad++ and some nifty jQuery script).
My goal is to make individual lists of all the columns each comprised of the column header, and the "X" cells, but the "X" cells will have text in them that matches the first <td> of each row.
I took a try at it and failed so I'm hoping someone can see what I was aiming for and point out my flaws.
The route I was taking was to get everything into a neatly oriented array that I would then iterate through to create <div><ul><li>Column Header</li><li>text from first Row (X replaced)</li> etc...</ul></div>
I suspect that my row iteration and column iteration is backwards but any help would be appreciated.
This StackOverflow post has the gist of what I need but is not as comprehensive as I would like.
$('td').each(function() {
var currentHTML = $(this).html().toString();
if (currentHTML === " ") {
$(this).text("").addClass('nonX');
}
});
var columnIteration = $('tr:eq(0)').find('td').length;
console.log(columnIteration);
var corespondingTD = [];
for (i = 1, z = columnIteration; i < z; i++) {
$('tr').each(function() {
var rowIterated = [];
var columnHeader = $('tr:eq(0)').find($('td').eq(i)).text();
var xTD = $(this).find($('td').eq(i)).not($('td.nonX'));
rowIterated.push(columnHeader);
rowIterated.push(xTD);
corespondingTD.push(rowIterated);
});
}table {
border: solid 1px #000;
border-collapse: collapse;
}
td {
border: solid 1px #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td>WILLOW ADD-ON
<span style="mso-spacerun:yes"> </span>$6.99</td>
<td>TV ASIA<span style="mso-spacerun:yes"> </span>$9.99</td>
<td>ZEE TV & STAR INDIA PLUS 2-Pack<span style="mso-spacerun:yes">
</span>$14.99</td>
<td>SET ASIA & STAR INDIA PLUS 2-Pack<span style="mso-spacerun:yes">
</span>$14.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Desi 4-Pack<span style="mso-spacerun:yes"> </span>$29.99</td>
<td>Hindi 8-Pack
<span style="mso-spacerun:yes"> </span>$34.99</td>
<td>Desi Mega Pack: SET, TV Asia, Zee, Star Plus, Life OK, ABP News, Star Gold
<br> $42.99
</td>
<td>Hindi 12-Pack
<span style="mso-spacerun:yes"> </span>$44.99</td>
<td>Tamil 2-Pack
<span style="mso-spacerun:yes"> </span>$14.99</td>
<td>Punjabi 2-Pack
<span style="mso-spacerun:yes"> </span>$14.99</td>
</tr>
<tr>
<td>ABP NEWS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>AAPKA COLORS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>EROS NOW: VIDEO ON DEMAND <font class="font5">($9.99/mo. Add-On)</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>LIFE OK</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>NDTV 24x7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>NDTV GOOD TIMES
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SAB</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SONY MIX</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>STAR INDIA PLUS
<span style="mso-spacerun:yes"> </span></td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>STAR INDIA GOLD
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SET ASIA</td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>TV ASIA</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ZEE BOLLYWOOD</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ZEE TV</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>WILLOW</td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>VIJAY</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>SUN TV</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>JUS PUNJABI</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
</tr>
<tr>
<td>TV84</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
</tr>
<!--EndFragment-->
</tbody>
</table>Upvotes: 3
Views: 1228
Answers (1)
Robin Mackenzie
Reputation: 19319
Here is a minimal example with a simpler table that creates an object that contains properties corresponding to the column headers identified by an x with a value of an array of the corresponding row headers. I left some logging lines in there so you can see what is happening with the code as it figures out row and column header values for each x :
var lists = {};
buildLists();
console.log(JSON.stringify(lists, null, 2));
function buildLists() {
$('#data tbody tr td').each(function() {
var columnIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
if ($(this).html() == 'x') {
var columnHeader = getTableCellValue('data', 0, columnIndex);
var rowHeader = getTableCellValue('data', rowIndex, 0);
//console.log('hit at ' + rowIndex + ' ' + columnIndex);
//console.log(getTableCellValue('data', rowIndex, columnIndex));
//console.log(columnHeader + ' : ' + rowHeader);
if (!lists[columnHeader]) {
lists[columnHeader] = [];
}
lists[columnHeader].push(rowHeader);
};
});
};
function getTableCellValue(tableId, rowIndex, columnIndex) {
var cell = $('#' + tableId + ' tr').eq(rowIndex).find('td').eq(columnIndex)
return cell.text();
}table {
border: solid 1px #000;
border-collapse: collapse;
}
td {
border: solid 1px #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<table id="data">
<tbody>
<tr>
<td></td>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
<tr>
<td>A</td>
<td>x</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td>x</td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>C</td>
<td></td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
</body>With your table (which I gave an id="data"), it still works but I think you need to fiddle with the solution a little bit to get your object property names a bit less verbose:
var lists = {};
buildLists();
console.log(JSON.stringify(lists, null, 2));
function buildLists() {
$('#data tbody tr td').each(function() {
var columnIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
if ($(this).html() == 'x') {
var columnHeader = getTableCellValue('data', 0, columnIndex);
var rowHeader = getTableCellValue('data', rowIndex, 0);
//console.log('hit at ' + rowIndex + ' ' + columnIndex);
//console.log(getTableCellValue('data', rowIndex, columnIndex));
//console.log(columnHeader + ' : ' + rowHeader);
if (!lists[columnHeader]) {
lists[columnHeader] = [];
}
lists[columnHeader].push(rowHeader);
};
});
};
function getTableCellValue(tableId, rowIndex, columnIndex) {
var cell = $('#' + tableId + ' tr').eq(rowIndex).find('td').eq(columnIndex)
return cell.text();
}table {
border: solid 1px #000;
border-collapse: collapse;
}
td {
border: solid 1px #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<table id="data">
<tbody>
<tr>
<td></td>
<td>WILLOW ADD-ON
<span style="mso-spacerun:yes"> </span>$6.99</td>
<td>TV ASIA<span style="mso-spacerun:yes"> </span>$9.99</td>
<td>ZEE TV & STAR INDIA PLUS 2-Pack<span style="mso-spacerun:yes">
</span>$14.99</td>
<td>SET ASIA & STAR INDIA PLUS 2-Pack<span style="mso-spacerun:yes">
</span>$14.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Desi 4-Pack<span style="mso-spacerun:yes"> </span>$29.99</td>
<td>Hindi 8-Pack
<span style="mso-spacerun:yes"> </span>$34.99</td>
<td>Desi Mega Pack: SET, TV Asia, Zee, Star Plus, Life OK, ABP News, Star Gold
<br> $42.99
</td>
<td>Hindi 12-Pack
<span style="mso-spacerun:yes"> </span>$44.99</td>
<td>Tamil 2-Pack
<span style="mso-spacerun:yes"> </span>$14.99</td>
<td>Punjabi 2-Pack
<span style="mso-spacerun:yes"> </span>$14.99</td>
</tr>
<tr>
<td>ABP NEWS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>AAPKA COLORS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>EROS NOW: VIDEO ON DEMAND <font class="font5">($9.99/mo. Add-On)</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>LIFE OK</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>NDTV 24x7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>NDTV GOOD TIMES
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SAB</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SONY MIX</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>STAR INDIA PLUS
<span style="mso-spacerun:yes"> </span></td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>STAR INDIA GOLD
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SET ASIA</td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>TV ASIA</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ZEE BOLLYWOOD</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ZEE TV</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>WILLOW</td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>VIJAY</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>SUN TV</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>JUS PUNJABI</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
</tr>
<tr>
<td>TV84</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
</tr>
<!--EndFragment-->
</tbody>
</table>
</body>Upvotes: 1
Related Questions
- How to Iterate a list of list data to fill html table in JQuery
- iterate column in row in table by JQuery
- JQuery iterate through a table
- HTML table to Loop Through each row
- Iterate table with JQuery
- Iterating over rows of table
- Looping through table rows
- Jquery iterating table
- Using .each to iterate in table
- jQuery iterate over table elements