Question

我在表格中有一个radiobuttons矩阵

<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标签的情况下实现第二部分？当然对第二部分有任何建议吗？

Answer 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，并为它们提供悬停类。

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

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

它比你想象的要复杂一些，因为单选按钮在没有点击的情况下被取消选中 - 它是通过点击同一组中的另一个单选按钮来触发的。

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

检查无线电按钮时，更改表格单元格背景颜色

1 个答案: