Changing width of tables columns in JavaScript

[KeredDrahcir]

I'm trying to change the width of a number of table cells using a combination of php and JavaScript. I created a loop that changed the width of the cells when I specified the width as a % value, then I decided I'd rather reference the value as the proper width but it doesn't work if I refrence them as px or em. Can someone help me.
I'm using Firefox. Also the loop is done in php becuase I couldn't get it to work in Firefox. If someone could suggest where I'm going wrong there, it would proably be better than mixing code too much. If is being called from the onclick on an image tag.

<?
  for ($j=1;$j<=200;$j++)
  {
?>
    document.getElementById('cola'+<?=$j;?>).style.width = '600px'; 
    document.getElementById('colb'+<?=$j;?>).style.width = '240px';
<?
  }
?>

[acoder]

Use JavaScript. Convert the PHP loop code into a JavaScript for loop.

I think you'll need to check how you're calling this function. Also post your HTML code (or at least part of it).

[KeredDrahcir]

I've sorted out the loop. Is gives me an error in the Error consol saying
document.getElementById("cola" + j) is null
However it still does it, but only when I have the values at %.
The code to call it is this:

<img alt="Change Widths" title="Switch column widths" src="/images_path/image.png" onclick="for (j=1;j<=200;j++){document.getElementById('cola'+j).style.width = '60%'; document.getElementById('colb'+j).style.width = '28%';}" onmouseover="this.style.cursor='pointer';"/>

If I change the values to 600px and 280px, it doesn't do anything but the error consol comes up with no new errors.

[acoder]

Could you post the first few lines of your table HTML markup.

[KeredDrahcir]

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<?
  $t=0;
?>
  <tr>
    <td width="1%">
    </td>
    <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola<?=$t;?>">
      content
    </td>
    <td width="1%">
      &nbsp;
    </td>
    <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb<?=$t;?>">
      content
    </td>
    <td width="10%">
      &nbsp;
    </td>
  </tr>
<?
  $t++;
?>
</table>

[acoder]

Is that the actual PHP code? Is there no loop to make 200 rows? If not, can you post the HTML source code generated from PHP (view source in browser).

One thing I have noticed is that your loop starts with 0 in PHP and with 1 in JavaScript.

[KeredDrahcir]

There is a loop but I didn't include that bit. Don't worry about the $t counter. It set it to 0 to begin with but it starts at 1 n the right place. I can post the whole table, here's the first three rows.

<tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola1">
    content  
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb1">
    content
  </td>
  <td width="10%">
    &nbsp;
  </td>
</tr>
<tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola2">
    content
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb2">
    content
  </td>
  <td width="10%">
    &nbsp;
  </td>
</tr>
<tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola">
    content
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb3">
    content
  </td>
  <td width="10%">
    &nbsp;
  </td>                                             </tr>

[acoder]

On line 39, is that a typo? The ID is "cola" instead of "cola3".

[KeredDrahcir]

Yes that will be a mistake from me trying to make to code more readable. It's not in the code.

[acoder]

OK, there must be something else which is causing the problem. I tried some test code based on the code you've posted and it seems to work fine:

<html> 
<body> 
<table>
<tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola1">
    content  
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb1">
    content
  </td>
  <td width="10%">
    &nbsp;
  </td>
</tr>
<tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola2">
    content
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb2">
    content
  </td>
  <td width="10%">
    &nbsp;
  </td>
</tr>
<tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola3">
    content
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb3">
    content
  </td>
  <td width="10%">
    &nbsp;
  </td>
 </tr>
</table>
<img alt="Change Widths" title="Switch column widths" src="/images_path/image.png" onclick="for (j=1;j<=3;j++){document.getElementById('cola'+j).style.width = '600px'; document.getElementById('colb'+j).style.width = '280px';}" onmouseover="this.style.cursor='pointer';"/>
 
</body> 
</html>

[KeredDrahcir]

I finally managed to solve the problem. I had no way where I called the function of knowing how many rows I'd have. I already had hundreds and I could easy get thousands or even tens of thousands.
Istead of changing to column widhts of each row, I put and extra row in the table at the top with the column widths defined and for the rest of the rows just removed the width from the <td> tag. I also think I had forgotton how I'd defined the table and had the column id duplicated which doesn't help.

Thanks for all your help.