469,295 Members | 1,914 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,295 developers. It's quick & easy.

Changing width of tables columns in JavaScript

KeredDrahcir
426 256MB
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.

Expand|Select|Wrap|Line Numbers
  1. <?
  2.   for ($j=1;$j<=200;$j++)
  3.   {
  4. ?>
  5.     document.getElementById('cola'+<?=$j;?>).style.width = '600px'; 
  6.     document.getElementById('colb'+<?=$j;?>).style.width = '240px';
  7. <?
  8.   }
  9. ?>
Feb 16 '11 #1

✓ answered by 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.

10 3623
acoder
16,027 Expert Mod 8TB
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).
Feb 16 '11 #2
KeredDrahcir
426 256MB
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:
Expand|Select|Wrap|Line Numbers
  1. <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.
Feb 16 '11 #3
acoder
16,027 Expert Mod 8TB
Could you post the first few lines of your table HTML markup.
Feb 16 '11 #4
KeredDrahcir
426 256MB
Expand|Select|Wrap|Line Numbers
  1. <table width="100%" cellpadding="0" cellspacing="0" border="0">
  2. <?
  3.   $t=0;
  4. ?>
  5.   <tr>
  6.     <td width="1%">
  7.     </td>
  8.     <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola<?=$t;?>">
  9.       content
  10.     </td>
  11.     <td width="1%">
  12.       &nbsp;
  13.     </td>
  14.     <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb<?=$t;?>">
  15.       content
  16.     </td>
  17.     <td width="10%">
  18.       &nbsp;
  19.     </td>
  20.   </tr>
  21. <?
  22.   $t++;
  23. ?>
  24. </table>
Feb 16 '11 #5
acoder
16,027 Expert Mod 8TB
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.
Feb 16 '11 #6
KeredDrahcir
426 256MB
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.
Expand|Select|Wrap|Line Numbers
  1. <tr>
  2.   <td width="1%">
  3.     &nbsp;
  4.   </td>
  5.   <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola1">
  6.     content  
  7.   </td>
  8.   <td width="1%">
  9.     &nbsp;
  10.   </td>
  11.   <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb1">
  12.     content
  13.   </td>
  14.   <td width="10%">
  15.     &nbsp;
  16.   </td>
  17. </tr>
  18. <tr>
  19.   <td width="1%">
  20.     &nbsp;
  21.   </td>
  22.   <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola2">
  23.     content
  24.   </td>
  25.   <td width="1%">
  26.     &nbsp;
  27.   </td>
  28.   <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb2">
  29.     content
  30.   </td>
  31.   <td width="10%">
  32.     &nbsp;
  33.   </td>
  34. </tr>
  35. <tr>
  36.   <td width="1%">
  37.     &nbsp;
  38.   </td>
  39.   <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola">
  40.     content
  41.   </td>
  42.   <td width="1%">
  43.     &nbsp;
  44.   </td>
  45.   <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb3">
  46.     content
  47.   </td>
  48.   <td width="10%">
  49.     &nbsp;
  50.   </td>                                             </tr>
Feb 16 '11 #7
acoder
16,027 Expert Mod 8TB
On line 39, is that a typo? The ID is "cola" instead of "cola3".
Feb 16 '11 #8
KeredDrahcir
426 256MB
Yes that will be a mistake from me trying to make to code more readable. It's not in the code.
Feb 17 '11 #9
acoder
16,027 Expert Mod 8TB
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:
Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <body> 
  3. <table>
  4. <tr>
  5.   <td width="1%">
  6.     &nbsp;
  7.   </td>
  8.   <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola1">
  9.     content  
  10.   </td>
  11.   <td width="1%">
  12.     &nbsp;
  13.   </td>
  14.   <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb1">
  15.     content
  16.   </td>
  17.   <td width="10%">
  18.     &nbsp;
  19.   </td>
  20. </tr>
  21. <tr>
  22.   <td width="1%">
  23.     &nbsp;
  24.   </td>
  25.   <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola2">
  26.     content
  27.   </td>
  28.   <td width="1%">
  29.     &nbsp;
  30.   </td>
  31.   <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb2">
  32.     content
  33.   </td>
  34.   <td width="10%">
  35.     &nbsp;
  36.   </td>
  37. </tr>
  38. <tr>
  39.   <td width="1%">
  40.     &nbsp;
  41.   </td>
  42.   <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola3">
  43.     content
  44.   </td>
  45.   <td width="1%">
  46.     &nbsp;
  47.   </td>
  48.   <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb3">
  49.     content
  50.   </td>
  51.   <td width="10%">
  52.     &nbsp;
  53.   </td>
  54.  </tr>
  55. </table>
  56. <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';"/>
  57.  
  58. </body> 
  59. </html>
Feb 17 '11 #10
KeredDrahcir
426 256MB
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.
Feb 28 '11 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by abs | last post: by
5 posts views Thread by John M | last post: by
reply views Thread by Vincent | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.