How can I add CSS / JavaScript to dynamically-created radio buttons in a table?

How can I add CSS / JavaScript to dynamically-created radio buttons in a table?

  
(First, apologies if you saw/replied to my first post about this; I am the amazing spaz, clicked Delete and confirm before I realized that it wasn't Edit - very sorry)

I have a 4-column table building from an SQL query that can return between 0 and 21 rows.

In the 3rd and 4th columns, I have radio buttons (Correct and Incorrect).  I need to be able turn Correct's container green and Incorrect's container red when the button is clicked.

I have this JavaScript function:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function AttribHandler( btnCorrectID, btnIncorrectID, contrOptCorrectID, contrOptIncorrectID )
{
    var optCorrect = document.getElementById( btnCorrectID );
    var optIncorrect = document.getElementById( btnIncorrectID );
    var contrOptCorrect = document.getElementById( contrOptCorrectID );
    var contrOptIncorrect = document.getElementById( contrOptIncorrectID );
    
    optCorrect.onclick = function()
    {
        AttribHandler( btnCorrectID, btnIncorrectID, contrOptCorrectID, contrOptIncorrectID );
    }
    
    optIncorrect.onclick = function()
    {
        AttribHandler( btnCorrectID, btnIncorrectID, contrOptCorrectID, contrOptIncorrectID );
    }
    
    contrOptCorrect.parentNode.className = "AttribButtonOff"
    contrOptIncorrect.parentNode.className = "AttribButtonOff"
    
    if  (optCorrect.checked == 1)
    {
        contrOptCorrect.parentNode.className = "AttribButtonGreen"
    }
    else if (optIncorrect.checked == 1)
    {
        contrOptIncorrect.parentNode.className = "AttribButtonRed"
    }
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I've scripted the CSS in the style sheets thusly:

.AttribButtonGreen {
    background-color: #008000;
}

.AttribButtonRed {
    background-color: #FF0000;
}

.AttribButtonOff {
    background-color:#FFFFFF;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Is there a particular trick to adding JavaScript / CSS to dynamically-created controls as I'm trying to do?  Been messing with it on-and-off for days, and I can't get it to work.

Any assistance is appreciated, and again, sorry if you replied to my first post that I spaz-deleted.
Hi Chris,

Have you taken a look at jQuery's function addClass() ? It seems simpler to use than accessing the DOM from scratch...

Also, as a workaround, have you tried to do an Ajax call to refresh the containers (I know it's not performance wise, but perhaps easier to do...)?

Cheers!

So I got it to work by setting a screen action on both buttons to run my JavaScript function.  That works.  All buttons independently highlight green or red depending if they're Correct or Incorrect, using the function above, though I removed 'parentNode' from the contr variable's stylename calls.

The only little disappointment is that even though I'm running that JavaScript in the onLoad, the buttons won't reload with the highlight on their containers.  Again, the buttons are dynamically created from an SQL query, so I'm wondering if maybe there's a timing issue between the SQL query filling the radio buttons (which it does fine), and when the JavaScript is run in the onLoad.  I wonder if I can add like an onBlur event to the buttons that will pick up the change when they load.

I'll try it and post if it worked or not.
The onBlur thing didn't work.  Not quite sure how to get these buttons to load already highlighted if they've been selected yet.  Any ideas would be appreciated, and I'll be poking at this problem whenever I have a free minute.
So if anyone's interested, here's the way I got it to work (a while back - just haven't been back to the forums recently to update this).  I ended up digging into the HTML to get the ID of the radio buttons I dealing with and running the following function in the OnLoad (try not to laugh at the JavaScript too much - I was still new at it - I'll probably go back and clean it up when I have time; so you know, never):

function setAttribButtonsOnLoad() {
    // Set the colors on the attribute buttons
    var optCorrect, optIncorrect, contrOptCorrect, contrOptIncorrect;
    var ctlNum;
    var tblAttributes = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable");
    var iTableRows = tblAttributes.rows.length + 1; // -1 one since it counts header, +2 because table starts at row 03

    var testRadioButton = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl03_wtoptCorrect");
    if (testRadioButton == null) { return; } // make sure there's attributes to test in the table; if not, skip setting attribute button colors
    
    
    for ( ctlNum = 3; ctlNum <= iTableRows; ctlNum++ ) {
        if (ctlNum < 10)  //  terrible, terrible JavaScript - where's the Format function?!
        {
            //$("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable").
            //$("#INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl0" + ctlNum + "_wtoptCorrect").addClass("
            optCorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl0" + ctlNum + "_wtoptCorrect");
            optIncorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl0" + ctlNum + "_wtoptIncorrect");
            contrOptCorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl0" + ctlNum + "_wtcontrOptCorrect");
            contrOptIncorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl0" + ctlNum + "_wtcontrOptIncorrect");
        }
        else
        {
            optCorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl" + ctlNum + "_wtoptCorrect");
            optIncorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl" + ctlNum + "_wtoptIncorrect");
            contrOptCorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl" + ctlNum + "_wtcontrOptCorrect");
            contrOptIncorrect = document.getElementById("INTACT_Common_wtPrimaryHeader_block_wtMainContent_wtAttributesTable_ctl" + ctlNum + "_wtcontrOptIncorrect");
        }
        
        if (optCorrect.checked)
        {
            contrOptCorrect.className = "AttribButtonGreen";
        }
        else if (optIncorrect.checked)
        {
            contrOptIncorrect.className = "AttribButtonRed";
        }
    }
}