We help IT Professionals succeed at work.

IE problem inserting rows & cells then setting colspan

Dan_82
Dan_82 asked
on
Medium Priority
1,400 Views
Last Modified: 2012-06-27
Hi, i'm inserting rows and cells into a table dynamically using javascript and its working GREAT!!!

but the problem is i need the rows created to have an initial cell with no attrributes required then another cell with colspan=6, i could do this by innerHTML on the row but IE doesn't support this (please correct me if i'm wrong), second to this i could create a row then two cells in it, and then  use setAttribute on the secound cell to set the colspan, but IE doesn't seem to support this either :(

So if anyone can think of a solution to this other then creating all the rows initally and hiding them i'd be very greatful, i'm currently hiding them then displaying them but the resulting page is v.large.

Thanks
Dan
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004

Commented:
<html>
  <head>
    <script type="text/javascript">
  function addRow( aTab )
  {
    var tbl = document.getElementById( aTab ) ;
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    // left cell
    var cellLeft = row.insertCell( 0, 2 ) ;
    cellLeft.colSpan = 2 ;
    var textNode = document.createTextNode( 'Some text' );
    cellLeft.appendChild(textNode);

    // right cell
    var cellRight = row.insertCell( 1 ) ;
    textNode = document.createTextNode( 'Some text 2' );
    cellRight.appendChild(textNode);
  }
    </script>
  </head>
  <body>
    <table id="aTable" border="1">
      <tr><td>1</td><td>2</td><td>3</td>
    </table><br>
    <input type="button" onclick="addRow('aTable')" value="Add Row">
  </body>
</html>
CERTIFIED EXPERT
Top Expert 2004

Commented:
Sorry:

<html>
  <head>
    <script type="text/javascript">
  function addRow( aTab )
  {
    var tbl = document.getElementById( aTab ) ;
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    // left cell
    var cellLeft = row.insertCell( 0 ) ;
    cellLeft.colSpan = 2 ;
    var textNode = document.createTextNode( 'Some text' );
    cellLeft.appendChild(textNode);

    // right cell
    var cellRight = row.insertCell( 1 ) ;
    textNode = document.createTextNode( 'Some text 2' );
    cellRight.appendChild(textNode);
  }
    </script>
  </head>
  <body>
    <table id="aTable" border="1">
      <tr><td>1</td><td>2</td><td>3</td>
    </table><br>
    <input type="button" onclick="addRow('aTable')" value="Add Row">
  </body>
</html>

Should do it :-)
CERTIFIED EXPERT
Top Expert 2004
Commented:
Basically, after you create your cell with "insertCell", simple set the colSpan attribute...

ie:

  cellLeft.colSpan = 2 ;

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.