0

我在表格中有一个单选按钮矩阵

<table class="example_table">
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <tr>
    <td><input id="radio1_1" name="radio_group_1" type="radio"></td>
    <td><input id="radio1_2" name="radio_group_1" type="radio"></td>
    <td><input id="radio1_3" name="radio_group_1" type="radio"></td>
    <td><input id="radio1_4" name="radio_group_1" type="radio"></td>
  </tr>
  <tr>
    <td><input id="radio2_1" name="radio_group_2" type="radio"></td>
    <td><input id="radio2_2" name="radio_group_2" type="radio"></td>
    <td><input id="radio2_3" name="radio_group_2" type="radio"></td>
    <td><input id="radio2_4" name="radio_group_2" type="radio"></td>
  </tr>
  <tr>
    <td><input id="radio3_1" name="radio_group_3" type="radio"></td>
    <td><input id="radio3_2" name="radio_group_3" type="radio"></td>
    <td><input id="radio3_3" name="radio_group_3" type="radio"></td>
    <td><input id="radio3_4" name="radio_group_3" type="radio"></td>
  </tr>
</table>

我想要两件事-

  • 在鼠标悬停时，我想要鼠标悬停在不同颜色上的行和列。

  • 带有选中单选按钮的单元格应具有不同的背景颜色。

我以为我会使用一些 jQuery，我想出了第一部分，但第二部分我似乎无法正确。我的第一部分代码是

$(function(){

  $(".example_table").delegate('td', 'mouseover mouseleave', function(e){

    if (e.type == 'mouseover'){
      $(this).parent().addClass("hover");
      $("colgroup").eq($(this).index()).addClass("hover");
    } else{
      $(this).parent().removeClass("hover");
      $("colgroup").eq($(this).index()).removeClass("hover");

    }

  });

});

当然还有我的 CSS：

.hover {
  background-color: #F9F9F9;
}

.checked {
  background-color: #F9F9F9;
}

.not_checked {
  background-color: #F9F9F9;
}

colgroup还有没有办法在没有标签的情况下实现第二部分？当然，对第二部分有什么建议吗？

4

1 回答 1

1

这是一个没有 colgroup 的解决方案。

$(function(){
    $(".example_table").delegate('td', 'mouseover mouseleave', function(e){
        if (e.type == 'mouseover'){
            $(this).parent().addClass('hover');
            var i = $(this).parent().find('td').index(this) + 1;
            $(this).closest('table').find('td:nth-child('+i+')').addClass('hover');
        } else {
            $(this).closest('table').find('tr, td').removeClass('hover');
       }
    }); 
    $(".example_table").delegate('input', 'click', function(e){
        $(this).closest('table').find('td.checked input:not(:checked)')
            .closest('td').removeClass('checked');
        if ($(this).is(':checked')) {
            $(this).closest('td').addClass('checked');
        }
    });

});

基本上，我们找到一个列索引，然后找到位于同一索引处的所有 td，并为它们提供悬停类。

第二部分监视单选按钮上的点击事件，然后做两件事：

  1. 查找 td 中带有选中类的所有未选中单选按钮，并删除该类
  2. 检查当前单击的单选按钮，并在必要时添加选中的类。

它比您最初预期的要复杂一些，因为单选按钮在不单击它们的情况下会被取消选中 - 它是通过单击同一组中的另一个单选按钮来触发的。

小提琴在这里：http: //jsfiddle.net/mCPXH/

于 2013-06-07T01:35:44.580 回答