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
Solved

How can I Dynamically Change ColSpan

Posted on 2003-11-04
7
1,160 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
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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 125 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Multiflying 2 Input Text On a Table 7 31
Diminish Pop-up  in 3 seconds 7 49
How to check if a session is disconnected in php 9 32
Search Item in Table 2 22
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 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