Menu
I am trying to delete multiple columns from html table using javascript. The approach it is using is that it searches in top row for tag "<span></span>", if found, then it deletes that whole column. Column can be any which has empty span tags. It is working if it does not has any colspan or rowspan tag. But not working in vice-versa case.
The below table is just a short example, although I have attached the image of actual table I am working on.
The catch here is "rowspan" and "colspan" which makes it a little tricky.
Here is my code
<!DOCTYPE html>
<html>
<body>
<table style="width:100%" border='1' id='Just_for_california'>
<tr>
<td rowspan='2'><span></span></td>
<td>S</td>
<td><span></span></td>
</tr>
<tr>
<td colspan='2'>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
<script>
var table = document.getElementById('Just_for_california'),
rows = table.rows;
for (var i = 0; i < rows[0].cells.length; i++) {
var str = rows[0].cells[i].innerHTML;
if (str.search("<span></span>") != -1) {
for (var j = 0; j < rows.length; j++) {
rows[j].deleteCell(i);
}
}
}
</script>
</html>
Thanks
929
for. I change your first loop to do everything reverse: for (var i = (rows[0].cells.length -1); i >= 0; i--), from back to front... So no indices are changing on deletion.for loop. With first for loop you iterate over 3 columns and in inner loop you assume that every row has the same number of cols, but it isn't. I change the code so, that if the cell has a colspan greater then 1 then decrease the colspan otherwise delete the cell.The complete updated code is this:
var countColumns = function(table) {
if (!table || !table.tagName || table.tagName != 'TABLE') { throw new Error("The parameter 'table' must be a <table> DOM element."); }
var maxColumnsCount = 0;
for (var i = 0; i < table.rows.length; i++) {
maxColumnsCount = Math.max(table.rows[i].cells.length, maxColumnsCount);
}
return maxColumnsCount;
};
var table = document.getElementById('Just_for_california');
var rows = table.rows;
for (var i = (countColumns(table) -1); i >= 0; i--)
{
var str = '';
var cellToDelete = [];
if (rows[0].cells[i] != undefined) {
str = rows[0].cells[i].innerHTML;
cellToDelete.push(i);
} else if (rows[0].cells[i -1].colSpan > 1) {
str = rows[0].cells[i -1].innerHTML;
cellToDelete.push(i -1);
cellToDelete.push(i);
}
if (str.search("<span></span>") != -1) {
for (var j = 0; j < rows.length; j++)
{
for (var k = 0; k < cellToDelete.length; k++) {
if (rows[j].cells[cellToDelete[k]] != undefined) {
if (rows[j].cells[cellToDelete[k]].colSpan > 1) {
rows[j].cells[cellToDelete[k]].colSpan -= 1;
} else {
rows[j].deleteCell(cellToDelete[k]);
}
}
}
}
}
}
And a demo FIDDLE
Updated demo FIDDLE
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
