更改指定颜色 <td> 用JavaScript

Question

我有一个要用HTML开发的测验，它以表格形式表示，并且在验证时，我需要用绿色为正确的选择（这是一个<td>标记）着色，用红色为错误的选择（背景属性），我该如何在javascript中做到这一点？提前

在此处输入图片说明

在这里编辑是我的HTML代码：

<body 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>

使用javascript测试时，我需要执行上面在代码中所说的内容：

 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}

Answer 1

jQuery解决方案：像这样的东西应该工作：

<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>

如果选择了单选按钮，则不会清除旧的背景色，但这只是一个开始。

纯Javascript解决方案

<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>

Answer 2

您可以使用关联数组来查看所单击的问题是否已选中正确答案。 此解决方案是用jquery编写的，因此您需要链接到源代码，例如<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> ，以便此代码起作用

$(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");
        }
    });
});

更改指定颜色 <td> 用JavaScript

问题描述

2 个解决方案

解决方案1
0 2011-10-17 14:38:14

解决方案2
0 2011-10-17 14:54:15

更改指定颜色 <td> 用JavaScript

问题描述

2 个解决方案

解决方案1 0 2011-10-17 14:38:14

解决方案2 0 2011-10-17 14:54:15

解决方案1
0 2011-10-17 14:38:14

解决方案2
0 2011-10-17 14:54:15