asked on

How can I Dynamically Change ColSpan

I have a table in which the top row is a header with some title text and stuff
The following rows contain say 8 cells
I have given the user the ability to hide the cells
So when they hide a cell all the cells from all the rows at that location are hidden
the problem is the title row still has colspan=8 and shows some empty space when
there is only 7 (or lower) cells below it.

So hide a column, colspan needs to be reduced, can't do it ....

I tried

tbody.children[0].children[0].setAttribute( "colspan", "2" );

' row 0 col 0 set colspan to 2

but this doent work!

any ideas?

monvelasquez

assuming your table is like this..
------------------------------------------------------------------
<table border="1" id="tblmain">
<tr>
      <td colspan="8">Header</td>
</tr>
<tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
</tr>
</table>
------------------------------------------------------------------

to make the colspan of the top row you can use a function like this..

------------------------------------------------------------------
<script language="javascript">
function reduceSpan() {
var tblmain = document.getElementById('tblmain');
var tbody = tblmain.children[0];
tbody.children[0].children[0].colSpan=7;
}
</script>
------------------------------------------------------------------

Zontar

> tbody.children[0].children[0].setAttribute( "colspan", "2" );

It's not "children", it's "childNodes".

Tip: Don't use firstChild, lastChild, and childNodes unless you test for the node type. Some browsers count linefeeds and spaces in the source code between tags as text nodes. Use the getElementsByTagName() method to get round this problem:

function reduceSpan()
{
var tblMain = document.getElementById("tblmain");
var tBody = tblMain.getElementsByTagName("tbody")[0];
var firstRow = tBody.getElementsByTagName("tr")[0];

firstRow.setAttribute("colspan", "7");
// or: firstRow.colSpan = "7";
}

Another tip: All element-attribute values are supposed to be strings. Using firstRow.colSpan = 7; (without the quotes) will throw an error in some browsers. Always use the quotes.

Zontar

Whoooooops, I got in too big a hurry there... let's try that again:

function reduceSpan()
{
var tblMain = document.getElementById("tblmain");
var tBody = tblMain.getElementsByTagName("tbody")[0];
var firstRow = tBody.getElementsByTagName("tr")[0];
var firstCell = firstRow.getElementsByTagName("td")[0];

firstCell.setAttribute("colspan", "7");
// or: firstCell.colSpan = "7";
}

Soory about that!

williamcampbell

ASKER

thanks to both but you are both doing essentially what I was already doing

do this test , assume an 8 cell row, grab first cell as described by Z

alert ( "FirstCell Colspan Before Set = " + firstCell.getAttribute ( "colspan " ) ); // shows 8
firstCell.setAttribute ( "Colspan", "2" );
alert ( "FirstCell Colspan Afert Set = " + firstCell.getAttribute ( "colspan " ) ); // shows 8!!!

any ideas .. is colspan readonly?

ASKER CERTIFIED SOLUTION

Zontar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

williamcampbell

ASKER

(currColSpan + 1) + ""; <-------

That is the trick I needed

Thanks Z man you rule!!

Zontar

No worries, mate.

People may laugh at me for taking the standards seriously, but, hey, when it says something's supposed to get passed a string, I try to make sure it gets a string. ;)