CODEWITHSUNDEEP
jquery
Roi
Roi

Reputation: 181

change number of elements color

I have table in this format:

<tr>
  <td><span></span></td>
  <td><span></span></td>
  <td><span></span></td>
</tr>

<tr>
  <td><span></span></td>
  <td><span></span></td>
  <td><span></span></td>
</tr>

when click on some SPAN i would like that all the spans inside the specific TR will get grey color.

how can I do that?

element.parent("tr").children("span").attr('style', 'color: #838282 !important');

Upvotes: 0

Views: 43

Answers (4)

AmmarCSE
AmmarCSE

Reputation: 30557

You can try this JavaScript code:

$('tr span').click(function(){
    $(this).closest('tr').find('span').css('color', '#838282');
});

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

span is not direct child so you need to use find() and tr is parent of td not parent of span so use closest(). For applying style use css(), also there is no need of !important in css().

$('tr span').click(function(){
    $(this).closest("tr").find("span").css('color', '#838282');
});

Upvotes: 2

Diptox
Diptox

Reputation: 1809

$("span").on("click",function()
{
    $(this).parents("tr").find("span").css('color', '#838282');
});

Upvotes: 0

Aroniaina
Aroniaina

Reputation: 1252

  • Jquery parents(selector) get the match selector in ancestors
  • Jquery find(selector) get the match children in children tree

Run the code snippet to see result

$(document).ready(function() {
  $("span").click(function() {
    $(this).parents("tr").find("span").attr('style', 'color: #838282');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<table>
  <tr>
    <td><span>A</span>
    </td>
    <td><span>B</span>
    </td>
    <td><span>C</span>
    </td>
  </tr>
  <tr>
    <td><span>D</span>
    </td>
    <td><span>E</span>
    </td>
    <td><span>F</span>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions