Changing width of tables columns in JavaScript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • KeredDrahcir
    Contributor
    • Nov 2009
    • 426
    #1

    Changing width of tables columns in JavaScript

    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.

    Code:
    <?
  for ($j=1;$j<=200;$j++)
  {
?>
    document.getElementById('cola'+<?=$j;?>).style.width = '600px'; 
    document.getElementById('colb'+<?=$j;?>).style.width = '240px';
<?
  }
?>
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      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).

        Comment

        • KeredDrahcir
          Contributor
          • Nov 2009
          • 426
          #3
          I've sorted out the loop. Is gives me an error in the Error consol saying
          document.getEle mentById("cola" + j) is null
          However it still does it, but only when I have the values at %.
          The code to call it is this:
          Code:
          <img alt="Change Widths" title="Switch column widths" src="/[I]images_path[/I]/[I]image[/I].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.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Could you post the first few lines of your table HTML markup.

                Comment

                • KeredDrahcir
                  Contributor
                  • Nov 2009
                  • 426
                  #5
                  Code:
                  <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;?>">
      [I]content[/I]
    </td>
    <td width="1%">
      &nbsp;
    </td>
    <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb<?=$t;?>">
      [I]content[/I]
    </td>
    <td width="10%">
      &nbsp;
    </td>
  </tr>
<?
  $t++;
?>
</table>

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      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.

                        Comment

                        • KeredDrahcir
                          Contributor
                          • Nov 2009
                          • 426
                          #7
                          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.
                          Code:
                          <tr>
  <td width="1%">
    &nbsp;
  </td>
  <td width="28%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" valign="top" id="cola1">
    [I]content[/I]  
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb1">
    [I]content[/I]
  </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">
    [I]content[/I]
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb2">
    [I]content[/I]
  </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">
    [I]content[/I]
  </td>
  <td width="1%">
    &nbsp;
  </td>
  <td width="60%" style="background-color: #6699cc; padding: 0px 10px 0px 10px;" id="colb3">
    [I]content[/I]
  </td>
  <td width="10%">
    &nbsp;
  </td>                                             </tr>

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              On line 39, is that a typo? The ID is "cola" instead of "cola3".

                                Comment

                                • KeredDrahcir
                                  Contributor
                                  • Nov 2009
                                  • 426
                                  #9
                                  Yes that will be a mistake from me trying to make to code more readable. It's not in the code.

                                    Comment

                                    • acoder
                                      Recognized Expert MVP
                                      • Nov 2006
                                      • 16032
                                      #10
                                      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:
                                      Code:
                                      <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>

                                        Comment

                                        • KeredDrahcir
                                          Contributor
                                          • Nov 2009
                                          • 426
                                          #11
                                          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.

                                            Comment

                                            Previous template Next
                                            Working...