Change the color of the a specified <td> with javascript

I have a quiz to develop with HTML, it is represented on a table form and on verifying, i need to color the right choice (which is a <td> tag) with green and the wrong choice with red (the background property), how can i do that in javascript? thx in advance

EDIT here is my HTML code:

<bod开发者_开发知识库y id="question1" onLoad="InitializeTimer()">
<h2>Question 1/10</h2>
<div class="question1">
<form name="question">
<table>
<tr><td>1 fois</td><td><input type="radio" name="question1" value="1"></td></tr>
<tr><td>2 fois</td><td><input type="radio" name="question1" value="2"></td></tr> 
<tr><td>3 fois</td><td><input type="radio" name="question1" value="3"></td></tr>
<tr><td>4 fois</td><td><input type="radio" name="question1" value="4"></td></tr>
</table>
</form>
</div>
</body>

When testing with javascript, i need to do what i have said above in this code:

 if(document.question.question1[3].checked)
            {//that is true, color the background of the <td> tag in green}
            else
            {//that is wrong, color the background of the <td> tag in red}

---

You could use an associative array to see if the question that is clicked has the right answer checked. This solution is written in jquery so your gonna need to link to the source code like so <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> in order for this code to work

$(document).ready(function(){
    var answerArray = { "question1": "answerNumber", "question2": "answerNumber" };
    $('#question input[type="radio"]').checked(function() {
        var questionNumber = $(this).attr("name");
        var answer = $(this).val();
        if (answerArray[questionNumber] == answer) {
            $(this).parent().css("backgroundColor", "green");
        } else {
            $(this).parent().css("backgroundColor", "red");
        }
    });
});

---

JQuery Solution: Something like this should work:

<table>
<tr id="answer1">
    <td>1</td>
    <td><input type="radio" name="test" value="1"/></td>
</tr>
<tr id="answer2">
    <td>2</td>
    <td><input type="radio" name="test" value="2"/></td>
</tr>
<tr id="answer3">
    <td>3</td>
    <td><input type="radio" name="test" value="3"/></td>
</tr>
</table>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script>
    $(document).ready( function() {
        $("input[type=radio]").click(function(evt) {
            var color = 'red';
            if ($(this).val() == '2') {
                color = 'green';
            }

            $("#answer" + $(this).val() + " td").css("backgroundColor", color);
        });
    });
</script>

This won't clear the old background color if the radio button is chosen, but it's a start.

Plain Javascript Solution

<table>
<tr id="answer1">
    <td>1</td>
    <td><input type="radio" name="test" value="1" onClick="checkAnswer(this)"/></td>
</tr>
<tr id="answer2">
    <td>2</td>
    <td><input type="radio" name="test" value="2" onClick="checkAnswer(this)"/></td>
</tr>
<tr id="answer3">
    <td>3</td>
    <td><input type="radio" name="test" value="3" onClick="checkAnswer(this)"/></td>
</tr>
</table>

<script>
function checkAnswer(form) {
    var color = 'red';
    if (form.value == '2') {
       color = 'green';
    }

    form.parentNode.style.backgroundColor = color;
    form.parentNode.previousSibling.previousSibling.style.backgroundColor = color;
}
</script>