[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

How can I Dynamically Change ColSpan

Posted on 2003-11-04
7
Medium Priority
?
1,197 Views
Last Modified: 2012-06-27
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?




0
Comment
Question by:williamcampbell
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 3

Expert Comment

by:monvelasquez
ID: 9684112
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9684626
>  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
 
LVL 11

Expert Comment

by:Zontar
ID: 9684640
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 12

Author Comment

by:williamcampbell
ID: 9688448
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
 
LVL 11

Accepted Solution

by:
Zontar earned 500 total points
ID: 9691753
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
 
LVL 12

Author Comment

by:williamcampbell
ID: 9697614
(currColSpan + 1) + "";   <-------

That is the trick I needed

Thanks Z man you rule!!

0
 
LVL 11

Expert Comment

by:Zontar
ID: 9698779
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question