Używasz poniższego kodu, aby przełączać kolor 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>

Powyżej kodu działa dobrze, przełączając kolor TD, sprawdź Demo tutaj

Ale teraz muszę robić trzy rzeczy,

  1. Powyżej kodu działa dla wszystkich TDS, potrzebuję go do pracy tylko dla ostatniej kolumny klasy tabeli "MYTable",
  2. Muszę dodać przycisk, który po kliknięciu powinien zmienić cały kolor TD do "Białe" klasy tabeli "MyTable"
  3. Kompletny wiersz powinien być czerwony kolor, gdy wybieramy konkretną komórkę. Pomóż mi to naprawić
5
Friend 10 wrzesień 2012, 12:07

4 odpowiedzi

Najlepsza odpowiedź

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

Kąt 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');
    });
});​

Demo

Według komentarza

$(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');
    });
});​

Demo

4
Community 20 czerwiec 2020, 09:12

Wystarczy zmienić selektor jQuery do 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/


Na twoje drugie pytanie potrzebujesz HTML i jQuery:

HTML:

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

JQuery:

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

Jest to jeden sposób, aby to zrobić, możesz oczywiście wybrać tylko TD z ostatnim selektorem dziecka ponownie, ale ten kod jest dobrym miejscem do rozpoczęcia :)

http://jsfiddle.net/kyle_sevenoaks/hevcz/3/

3
Chris 10 wrzesień 2012, 08:21

html // Dodaj następujący kod do HTML

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

kodu 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'})
});
1
Codegiant 10 wrzesień 2012, 09:24

Teraz sprawdź to

 $(function(){
      $("tr:last-child td").click(function(){
          $("tr:last-child td").addClass("on");
  });
});
0
Gautam3164 10 wrzesień 2012, 09:34