5

iamは以下のコードを使用してtdカラーを切り替えます

    <html>
    <head>
       <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       <script>
          $(function(){
             $("td").click(function(){
             $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
             });
          });
       </script>
       <style>
          article, aside, figure, footer, header, hgroup, 
          menu, nav, section { display: block; }
          .on { background-color:red; color:#ffffff; }
       </style>
    </head>
    <body>

    <table class="mytable" border=1>
       <tbody>
       <tr>
          <td>Hello World</td>
          <td>Hello World1</td>
          <td>Hello World2</td>
       </tr>
       <tr>
          <td>Hello World</td>
          <td>Hello World1</td>
          <td>Hello World2</td>
       </tr>
       <tr>
          <td>Hello World</td>
          <td>Hello World1</td>
          <td>Hello World2</td>
       </tr>
       </tbody>
    </table>

    </body>
    </html>

上記のコードは、tdの色を切り替えることで正常に機能します。ここで、デモを確認してください。

しかし今、私は3つのことをする必要があります。

  1. 上記のコードはすべてのtdsで機能します。テーブルクラス「mytable」の最後の列でのみ機能する必要があります。
  2. クリックするとすべてのtdの色をテーブルクラス「mytable」の「白」に変更するボタンを追加する必要があります
  3. 特定のセルを選択すると、完全な行は赤色になります。これを修正するのを手伝ってください
4

6 に答える 6

4

HTML

  <table class="mytable" border=1>
    <tbody>
      <tr>
        <td>Hello World</td>
        <td>Hello World1</td>
        <td>Hello World2</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World1</td>
        <td>Hello World2</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World1</td>
        <td>Hello World2</td>
      </tr>
    </tbody>
  </table>

<button id="change-color">Change Color</button>

jQuery 

$(function() {
    $(".mytable tr td:last-child").click(function() {
        $(this).addClass("on").parent().siblings("tr").find("td.on").removeClass("on");
    })

    $('#change-color').click(function() {
        $('.mytable td.on').removeClass('on');
    });
});​

デモ

コメントによると

$(function() {
    $(".mytable tr td:last-child").click(function() {
        $('td.on').removeClass('on');
        $(this).parent().find('td').addClass("on");
    })

    $('#change-color').click(function() {
        $('.mytable td.on').removeClass('on');
    });
});​

デモ

于 2012-09-10T08:27:05.843 に答える
3

jQueryセレクターを次のように変更するだけですtd:last-child

      $(function(){
          $("td:last-child").click(function(){ //this is the changed part
    $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
  });
});

http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/2/

2番目の質問には、HTMLとjQueryが必要です。

HTML：

<button id="tableButton">White</button>

jQuery：

$("button#tableButton").click( function() {
    $("table.mytable *").css({"background":"#fff", "color":"#000"});
});

これはそれを行う1つの方法です。もちろん、最後の子セレクターでtdだけを再度選択することもできますが、このコードは開始するのに適した場所です:)

http://jsfiddle.net/Kyle_Sevenoaks/hEvcZ/3/

于 2012-09-10T08:10:48.337 に答える
1

HTML //次のコードをhtmlに追加し

<input type="submit" value="submit" id="button">

JSコード

$(function(){
    $('td:last-child').click(function(){
  $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});

$('#button').on('click', function(){
   $('.mytable').find('td').css({'background':'#FFF', 'color':'#000'})
});
于 2012-09-10T08:21:38.037 に答える
0

2番目の質問について

$("#Button_for_color").click( function() {
     $("table .mytable").css({"background":"black", "color":"white"});
});

最初はわかりませんでしたが、次のように機能します

$(function(){
      $("td:last-child").click(function(){
       //You can play here
 });

2番目もうまくいくことを願っています

于 2012-09-10T08:58:01.077 に答える
0

3番目の質問：

 $(function(){
   $("td").click(function(){
   $("td").removeClass("on");
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
  });
});
于 2012-09-10T09:05:15.783 に答える
0

今これをチェックしてください

 $(function(){
      $("tr:last-child td").click(function(){
          $("tr:last-child td").addClass("on");
  });
});
于 2012-09-10T09:34:22.950 に答える