• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4900
  • Last Modified:

Dynamically modify table cell class.

Hello,

I am trying to dynamically change styles on individual table cells using javascript, I've gotten it to work with cells that have the same ID's but now that solution won't work in firefox because of that. so my question is, how do I get to make the cells style dynamically change without having to have identical ID's

here's the code i'm working with:
These are the tables that have the changing style:


<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="cherry_TL" id="DynamicFrameStyle">
        <DIV></DIV>
      </td>
      <td colspan="3" class="cherry_TOP" id="DynamicFrameStyle"> </td>
      <td class="cherry_TR" id="DynamicFrameStyle">
        <DIV></DIV>
      </td>
    </tr>
    <tr>
      <td class="cherry_LEFT" id="DynamicFrameStyle"> </td>
      <td colspan="3">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="GreyRed_TL" id="DynamicMatteStyle">
              <DIV></DIV>
            </td>
            <td class="GreyRed_TOP" id="DynamicMatteStyle"></td>
            <td class="GreyRed_TR" id="DynamicMatteStyle"></td>
          </tr>
          <tr>
            <td class="GreyRed_LEFT" id="DynamicMatteStyle"></td>
            <td>Content<td>
            <td class="GreyRed_RIGHT" id="DynamicMatteStyle"></td>
          </tr>
          <tr>
            <td class="GreyRed_BL" id="DynamicMatteStyle"></td>
            <td class="GreyRed_BOTTOM" id="DynamicMatteStyle"></td>
            <td class="GreyRed_BR" id="DynamicMatteStyle">
              <DIV></DIV>
            </td>
          </tr>
        </table>
      </td>
      <td class="cherry_RIGHT" id="DynamicFrameStyle"> </td>
    </tr>
    <tr>
      <td class="cherry_BL" id="DynamicFrameStyle">
        <DIV></DIV>
      </td>
      <td colspan="3" class="cherry_BOTTOM" id="DynamicFrameStyle"> </td>
      <td class="cherry_BR" id="DynamicFrameStyle">
        <DIV></DIV>
      </td>
    </tr>
  </table>




And here is the code that makes the changes based on "onChange" events in a drop down.


<script>                  
function Frame_OnChange(style)      {
      if (DynamicFrameStyle.length>1)      {
        for (var i=0; i<DynamicFrameStyle.length; i++)      {
          DynamicFrameStyle[i].className = style + DynamicFrameStyle[i].className.match("_.+");
    }
  } else {
    DynamicFrameStyle.className = style + DynamicFrameStyle.className.match("_.+");
  }
}

function Matte_OnChange(style)      {
      if (DynamicMatteStyle.length>1)      {
        for (var i=0; i<DynamicMatteStyle.length; i++)      {
          DynamicMatteStyle[i].className = style + DynamicMatteStyle[i].className.match("_.+");
    }
  } else {
    DynamicMatteStyle.className = style + DynamicMatteStyle.className.match("_.+");
  }
}
</script>

If you have any questions please let me know!

Thanks!

Chris
0
garfield1979123
Asked:
garfield1979123
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
do NOT have the same IDs.

Instead use
cells = document.getElementsByTagName('td')

and loop over them to see if they contain the partial ID or partial className :
if (cells[i].className.indexOf(style)!=-1)
0
 
MorcalavinCommented:
YOu can have ids like DynamicFrameStyle_1 and DynamicFrameStyle_2 and DynamicMattStyle_1 and DynamicMatteStyle_2, then you can use mplungjan  suggestion of dumping all the cells into an array of cell objects, then loop through them and to a regex test or a indexOf test on their id to see if they match.  This will still allow you to have unique id's but be able to identify the styles of them based on the id name.
0
 
garfield1979123Author Commented:
Any way that you could show me how it's done with the code in the quetions please ?

Thanks
0
 
Michel PlungjanIT ExpertCommented:
function Whatever_OnChange(type,style)      {
  var cells = document.getElementsByTagName('td');
  for (var i=0; i<cells.length; i++) {
    if (cell[i].id && cell[i].id.indexOf(type) ==0) { // starts with type
      cell[i].className = style + cells[i].className.match("_.+");
    }
  }
}


call is

Whatever_OnChange('DynamicMatte','GreyRed')

assuming you start the matte id with
id="DynamicMatte....."

and

Whatever_OnChange('DynamicFrame','cherry')

assuming you start the frame id with
id="DynamicFrame....."
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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