選中單選按鈕時，更改表格單元格的背景色

Question

我在桌子上有一個單選按鈕矩陣

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

我想要兩件事-

• 在mouseover上，我希望鼠標以不同的顏色懸停在其上的行和列。

• 選中了單選按鈕的單元格應具有不同的背景色。

我以為我會用一些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，並將​​它們也提供給懸停類。

第二部分監視單選按鈕上的click事件，然后執行以下兩項操作：

1. 查找與選中的類在td中所有未選中的單選按鈕，並刪除該類
2. 檢查當前單擊的單選按鈕，並在必要時添加選中的類。

這比您最初預期的要復雜一些，因為單選按鈕沒有被選中而沒有單擊就被選中-它是通過​​單擊同一組中的另一個單選按鈕來觸發的。

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