Fatal编程技术网
  • javascript/
  • Javascript 单击其中一个单元格时重置表格单元格颜色

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

javascript html css

Javascript 单击其中一个单元格时重置表格单元格颜色,javascript,html,css,radio-button,Javascript,Html,Css,Radio Button,我有一个用户调查，其中包括一系列问题和五个likert radio onclick=“setRadio（this，'row_1'）”对象。每个问题都在表中自己的行上。当用户单击其中一个likert单元格时，该单元格将以黄色高亮显示。问题是同一行上的其他单元格没有被重置，因此如果它们更改其选择，我们现在有两个黄色单元格 我想将行中的所有单元格重置为默认颜色，但是我在执行此操作时遇到了问题 <table> <tr id='row_1'> <td>The sky i

我有一个用户调查，其中包括一系列问题和五个likert radio 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>


功能设置收音机（oTD，行id）
{
document.getElementById（row_id）.style.color=''；
var-el，i=0；
而（el=oTD.childNodes[i++]
{
如果（el.type==“无线电”）
{
el.checked=true；
el.style.backgroundColor=‘黄色’；
}
}
}
将背景色设置为黄色，但行颜色重置未按预期工作（同一行上先前选定的单元格仍为黄色）

有没有更好的、希望没有痛苦的方法来实现这一点？

您对jQuery开放吗

$(function(){
    $("td input").parent().click(function(){
        $(this).css("background", "yellow").siblings("td").css("background", "white");
    });
});
请注意，此处使用的
.parent（）
是为了防止将其应用于标题列。它只选择其中包含
的
元素

无需为此使用库。下面介绍如何使用一些小型的本机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>


演示
桌子{
边界塌陷：塌陷；
}
运输署{
边框：1px纯黑；
填充物：5px；
}
天空是蓝色的
非常不同意
不同意
中立的
同意
强烈同意
天空是绿色的
非常不同意
不同意
中立的
同意
强烈同意
var likertCells=document.querySelectorAll（'.likertCells'）；//小心点！
对于（var i=0；i

检查IE8/9、Chrome30和FF28。你给了收音机两个名字，所以我删掉了一个。但是由于它们的名字在Javascript中不起作用，您可以替换我留下的名字。只要确保另一个名字是一个Id，而不是第二个名字

现在无法完全解决您的问题，但您需要一个jquery函数来选择所有名为“td”的标记。因此，您的函数看起来像：$（'td'）。单击（function（）{…}）；jQuery很好，明天将检查解决方案。谢谢。所以，当我选择一个收音机时，它会突出显示整行的黄色。编辑看起来你的作品就像预期的一样：发现了我们的不同。我有一些代码允许通过单击单元格来选择无线电对象。下面是我所看到的情况：如果您能更新您的答案，以便更好地回答我的问题（单击单元格，而不是无线电对象），我会选择您的答案作为正确答案。@acoder-我错过了，您希望单元格成为呼叫方。更新了答案。如您所见，我将内容和JS分开，而代码仍然直观。我希望你喜欢。这是演示：。您的解决方案与我的（）略有不同，但工作原理相同-谢谢。