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

Question

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

我想将行中的所有单元格重置为默认颜色，但我无法执行此操作。

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

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

有没有更好的、希望无痛的方法来完成这个？

Answer 1

您对 jQuery 持开放态度吗？

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

JSFiddle

请注意 .parent()此处使用的是防止将其应用于标题列。它只选择 <td>带有 <input> 的元素在他们里面 s