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>

欲しいものは2つ-

  • マウスオーバーでは、マウスが置かれている行と列を別の色で表示したい。

  • ラジオボタンがオンになっているセルには、異なる背景色が必要です。

私はいくつかのjQueryを使用すると思っていましたが、最初の部分は理解しましたが、2番目の部分は正しくないようです。最初の部分の私のコードは

$(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また、タグなしでこの 2 番目の部分を実現する方法はありますか? そしてもちろん、第 2 部へのアドバイスはありますか?

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 を見つけて、ホバー クラスも与えます。

2 番目の部分は、ラジオ ボタンのクリック イベントを監視し、次の 2 つのことを行います。

  1. チェックされたクラスの td にあるチェックされていないラジオ ボタンをすべて検索し、そのクラスを削除します。
  2. 現在クリックされているラジオ ボタンをチェックし、必要に応じてチェックされたクラスを追加します。

ラジオ ボタンはクリックせずにチェックが外されるため、最初に予想するよりも少し複雑です。これは、同じグループ内の別のラジオ ボタンをクリックするとトリガーされます。

フィドルはこちら: http://jsfiddle.net/mCPXH/

于 2013-06-07T01:35:44.580 に答える