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
garfield1979123Asked:
Who is Participating?
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.