Geek asks and answers

Change <td> color onclick for a specific table

iam using the code below to switch the td color

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

above code works fine by switching td color, please view demo

but now I need to do three things

  • the above code works for all tds, I need it to work only for the last column of the table class "mytable",
  • I need to add a button that, when pressed, should change the entire color of td to "white" of the table class "mytable"
  • the end of the line should be red when we select the cell of the cell. please help me fix this.
+5
source share
6 answers

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

Demo

According to the comment

$(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
source

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/

HTML jQuery:

HTML:

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

JQuery

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

, , , td , :)

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

+3

HTML // add the following code in html

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

Js code

$(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
source

For your second question

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

and for the first I'm not sure, but it works like

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

hope the second one will work

0
source

For the third question:

 $(function(){
   $("td").click(function(){
   $("td").removeClass("on");
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
  });
});
0
source

Now check this

 $(function(){
      $("tr:last-child td").click(function(){
          $("tr:last-child td").addClass("on");
  });
});
0
source

More articles:


All Articles