Solved

How can I Dynamically Change ColSpan

Posted on 2003-11-04
7
1,156 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
  • 4
  • 2
7 Comments
 
LVL 3

Expert Comment

by:monvelasquez
Comment Utility
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
Comment Utility
>  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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 12

Author Comment

by:williamcampbell
Comment Utility
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 125 total points
Comment Utility
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
Comment Utility
(currColSpan + 1) + "";   <-------

That is the trick I needed

Thanks Z man you rule!!

0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now