单击其中一个单元格时重置表格单元格颜色

时间:2014-06-05 20:42:56

标签: javascript html css radio-button

我进行了一次用户调查,其中包含一系列问题和五个Likert电台onclick =" setRadio(this,' row_1')"每个对象。每个问题都在表格中各自独立。当用户单击其中一个likert单元格时,它会以黄色突出显示该单元格。问题是同一行上的其他单元格没有被重置,所以如果它们改变了它们的选择,我们现在有两个黄色单元格。

我想将行中的所有单元格重置为默认颜色,但是我无法正常工作。

<table>
<tr id='row_1'>
<td>The sky is blue</td>
<td><input name="sqid_1" type=radio  onclick="setRadio(this, 'row_1')" name='lid_1' value=1> Strongly disagree</td>
<td><input name="sqid_1" type=radio  onclick="setRadio(this, 'row_1')" name='lid_1' value=2> Disagree</td>
<td><input name="sqid_1" type=radio  onclick="setRadio(this, 'row_1')" name='lid_1' value=3> Neutral</td>
<td><input name="sqid_1" type=radio  onclick="setRadio(this, 'row_1')" name='lid_1' value=4> Agree</td>
<td><input name="sqid_1" type=radio  onclick="setRadio(this, 'row_1')" name='lid_1' value=5> Strongly agree</td>
</tr>
<tr id='row_2'>
<td>The sky is green</td>
<td><input name="sqid_2" type=radio  onclick="setRadio(this, 'row_2')" name='lid_1' value=1> Strongly disagree</td>
<td><input name="sqid_2" type=radio  onclick="setRadio(this, 'row_2')" name='lid_2' value=2> Disagree</td>
<td><input name="sqid_2" type=radio  onclick="setRadio(this, 'row_2')" name='lid_3' value=3> Neutral</td>
<td><input name="sqid_2" type=radio  onclick="setRadio(this, 'row_2')" name='lid_4' value=4> Agree</td>
<td><input name="sqid_2" type=radio  onclick="setRadio(this, 'row_1')" name='lid_5' value=5> Strongly agree</td>
</tr>

<!-- lots more rows of questions & likert scales here -->
</table>

基本的javascript

        <script language='javascript'>
            function setRadio(oTD, row_id) 
            {

                document.getElementById(row_id).style.color ='';
                var el, i = 0;
                while (el = oTD.childNodes[i++]) 
                {
                    if (el.type == 'radio')
                    {
                        el.checked = true;
                        el.style.backgroundColor = 'yellow';
                    }
                }
            }
        </script>

将背景颜色设置为黄色,但行颜色重置未按预期工作(同一行中先前选定的单元格保持黄色)。

有没有更好的,希望无痛的方式来实现这个目标?

2 个答案:

答案 0 :(得分:1)

您对jQuery持开放态度吗?

$(function(){
    $("td input").parent().click(function(){
        $(this).css("background", "yellow").siblings("td").css("background", "white");
    });
});

JSFiddle

请注意,此处使用的.parent()是为了防止将其应用于标题列。它仅选择<td><input>个元素

答案 1 :(得分:0)

无需使用库。以下是使用一些小型原生Javascript的方法:

<!DOCTYPE html>
<html>   
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>    
<body>
    <form action="whatever">
        <table>
            <tr>
                <td>The sky is blue</td>
                <td class="likertCells">
                    <input type="radio" name='lid_1' value="1">Strongly disagree</td>
                <td class="likertCells">
                    <input type="radio" name='lid_1' value="2">Disagree</td>
                <td class="likertCells">
                    <input type="radio" name='lid_1' value="3">Neutral</td>
                <td class="likertCells">
                    <input type="radio" name='lid_1' value="4">Agree</td>
                <td class="likertCells">
                    <input type="radio" name='lid_1' value="5">Strongly agree</td>
            </tr>
            <tr>
                <td>The sky is green</td>
                <td class="likertCells">
                    <input type="radio" name='lid_2' value="1">Strongly disagree</td>
                <td class="likertCells">
                    <input type="radio" name='lid_2' value="2">Disagree</td>
                <td class="likertCells">
                    <input type="radio" name='lid_2' value="3">Neutral</td>
                <td class="likertCells">
                    <input type="radio" name='lid_2' value="4">Agree</td>
                <td class="likertCells">
                    <input type="radio" name='lid_2' value="5">Strongly agree</td>
            </tr>
        </table>
    </form>
    <script>
        var likertCells = document.querySelectorAll('.likertCells'); // Mind the dot!
        for (var i = 0; i < likertCells.length; i++) {
            likertCells[i].setAttribute('onclick', 'checkRadioAndHighlight(this)')
        }

        function checkRadioAndHighlight(caller) {
            var theKids = caller.childNodes;
            for (var j = 0; j < theKids.length; j++) {
                if (theKids[j].type == 'radio') theKids[j].checked = true;
            }
            var theSiblings = caller.parentNode.childNodes;
            for (var k = 0; k < theSiblings.length; k++) {
                if (theSiblings[k].tagName == 'TD') // The DOM returns tagNames in uppercase!
                theSiblings[k].style.backgroundColor = '';
            }
            caller.style.backgroundColor = '#FFFFBF';
        }
    </script>
</body>
</html>

在IE8 / 9,Chrome30和FF28中查看。你给收音机分别给了两个名字,所以我删了一个。但由于他们的名字在Javascript中没有发挥作用,你可以替换我留下的那个。只需确保将其他名称设为Id,而不是第二个名称。