Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1383
  • Last Modified:

IE problem inserting rows & cells then setting colspan

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
0
Dan_82
Asked:
Dan_82
  • 3
1 Solution
 
TimYatesCommented:
<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>
0
 
TimYatesCommented:
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 :-)
0
 
TimYatesCommented:
Basically, after you create your cell with "insertCell", simple set the colSpan attribute...

ie:

  cellLeft.colSpan = 2 ;
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now