选中单选按钮时，更改表格单元格的背景色 [英] change table cell background-color, when radiobutton is checked

问题描述

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

I have a matrix of radiobuttons in a table

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

我想要两件事-

• 在鼠标悬停时，我希望鼠标悬停在其上的行和列以不同的颜色显示.

• On mouseover I want the rows and columns over which the mouse is hovering in a different color.

具有选中的单选按钮的单元格应具有不同的背景色.

The cells with checked radiobuttons should have a different background-color.

我以为我会用一些jQuery，所以我弄清楚了第一部分，但是第二部分似乎不对.我第一部分的代码是

I thought I'd use some jQuery and I figured out the first part but the second I can't seem to get right. My code for the first part is

$(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标签的实现第二部分的方法吗?对于第二部分当然有什么建议吗?

Also is there a way to realise this second part without the colgroup tags? And of course any advice for the second part?

推荐答案

这里是没有colgroup的解决方案.

Here's a solution that will work without the colgroup's.

$(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，并将​​它们也提供给悬停类.

Basically, we find a column-index, and then find all td's that are at that same index, and give them the hover class as well.

第二部分监视单选按钮上的click事件，然后执行以下两项操作:

The second part watches for click event on the radio buttons, and then does two things:

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

这比您最初预期的要复杂一些，因为单选按钮没有被选中而不被点击-是通过单击同一组中的另一个单选按钮触发的.

It's a bit more complicated than you might first expect, because radio buttons get unchecked without clicking on them - it's triggered by clicking on another radio button in the same group.

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

这篇关于选中单选按钮时，更改表格单元格的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！