?
Solved

How can I Dynamically Change ColSpan

Posted on 2003-11-04
7
Medium Priority
?
1,185 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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 
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

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

777 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