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?




LVL 12
williamcampbellAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

monvelasquezCommented:
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>
------------------------------------------------------------------
0
ZontarCommented:
>  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.
0
ZontarCommented:
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!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

williamcampbellAuthor Commented:
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?
0
ZontarCommented:
Tested in MSIE 5.0, MSIE 6.0, Mozilla 1.5, and Opera 7.21:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
  body {font-size:1.5em;}
</style>

<script type="text/javascript">

function changeSpan(upOrDown)
{
  var tblMain = document.getElementById("tblmain");
  var firstRow = tblMain.getElementsByTagName("tr")[0];
  var firstCell = firstRow.getElementsByTagName("th")[0];

  currColSpan = firstCell.getAttribute("colspan") - 0;
 
  if(upOrDown == 1)    
    firstCell.colSpan = (currColSpan + 1) + "";
  else
    firstCell.colSpan = (currColSpan - 1) + "";
}

function removeCell(row, cell)
{
  row.removeChild(cell);
}

function remove()
{
  var tbl = document.getElementById("tblmain");
  var row = tbl.getElementsByTagName("tr")[1];
  var cells = row.getElementsByTagName("td");
 
  if(cells.length == 1)
  {
    alert("That's the last cell there, matey.\nDon't be a bloody mongchop!");
    return;
  }
 
  var cell = cells[cells.length - 1];  
 
  removeCell(row, cell);
  changeSpan(0);
}

function add()
{  
  var tbl = document.getElementById("tblmain");
  var row = tbl.getElementsByTagName("tr")[1];
  var cells = row.getElementsByTagName("td");
 
  var newCell = document.createElement("td");
  newCell.appendChild( document.createTextNode(cells.length + 1 + "") );
 
  row.appendChild(newCell);
  changeSpan(1);
}

</script>

</head>
<body>

<table border="1" id="tblmain" cellpadding="5" cellspacing="0">
  <tr>
    <th colspan="8">Header</th>
  </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>

<p id="testP" onclick="remove();">Click here to remove</p>.
<p id="testP" onclick="add();">Click here to add</p>.

</body>
</html>

IE 5 doesn't like setAttribute() for increasing the colspan, so I ended up using the colSpan property instead.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
williamcampbellAuthor Commented:
(currColSpan + 1) + "";   <-------

That is the trick I needed

Thanks Z man you rule!!

0
ZontarCommented:
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. ;)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.