CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Friend
Friend

Reputation: 1346

changing all <td> color onclick for a particular table

iam using below code to toggle 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 toggling td color, please check the demo here

but now i need to do three things,

  1. above code is working for all the tds ,i need it to work only for last column of table class "mytable",
  2. i need to add a button which when clicked should change all td's color to "white" of table class "mytable"
  3. compleate row should be red color when we select partcular cell. please help me to fix this

Upvotes: 5

Views: 3465

Answers (6)

GautamD31
GautamD31

Reputation: 28763

Now check this

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

Upvotes: 0

Codegiant
Codegiant

Reputation: 2150

HTML //add the follwing code into 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'})
});

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 4

GautamD31
GautamD31

Reputation: 28763

For your third question:

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

Upvotes: 0

GautamD31
GautamD31

Reputation: 28763

For your second question

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

and for the first i didnt sure but it works like

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

hope the second will also works

Upvotes: 0

Kyle
Kyle

Reputation: 67194

Just change your jQuery selector to 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/

For your second question, you need the HTML and jQuery:

HTML: 

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

jQuery:

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

This is one way to do it, you can of course select just the td with the last child selector again, but this code is a good place to start :)

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

Upvotes: 3

Related Questions