Question

当用户点击行中的任意位置时，我需要选择一个无线电输入，并在鼠标通过它时突出显示该行。我一直在玩一些选项，但是无法通过jquery / javascript来解决这些问题，但是我确信还有一些方法可以使用普通的html / css。我想要的是这里的调查的第一个问题：
http://es.surveymonkey.com/r/?sm=AX63qikOtbq%2bur0kXj1VwA%3d%3d
我知道可以用标签+输入加上＆＃34;表＆＃34;或＆＃34;显示：table-row;＆＃34;或宽度，但我只是无法使其工作。我会感激任何帮助。

Answer 1

在tr上使用css获取悬停效果，如：

ROW_CLASS:hover{
    background-color: COLOR
}

然后在jquery中添加或不添加类的所有tr上添加一个click事件处理程序，如：

$("tr").click(function() {
    $(this).find("input:radio:first").prop("checked", true).trigger("click");
});

Answer 2

我设法在经过数小时的阅读和测试后解决了这个问题。在这里你甚至可以兼容IE8 +，适用于输入收音机和复选框。您可以根据需要更改宽度和颜色。 CSS：

.div-table{
    display:table;
    width:100%;
}
.div-table-row{
    display: table-row;
    width: auto;
    clear:both;
}
.div-table-row:hover{
    background-color: #ecf0f1;
}
.div-table-col>input{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width: 6%;
    outline: none !important;
}
.div-table-col>label{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width: 94%;
}
.div-table-col>input:checked + label{
    background-color: #ecf0f1;
}

HTML看起来像这样（根据需要添加多行）：

<form action="" class="div-table">
<div class="div-table-row">
    <div class="div-table-col">
        <input type="radio" name="nametest" id="t1" value="1">
        <label for="t1"> Blablabla</label>
    </div>
</div>
<div class="div-table-row">
    <div class="div-table-col">
        <input type="radio" name="nametest" id="t2" value="2">
        <label for="t2"> Blablabla Blablabla Blablabla Blablabla</label>
    </div>
</div>
</form>

单击行时选择无线电输入

2 个答案: