CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Duplo W
Duplo W

Reputation: 623

How to add a class to TD's without text in them?

I'm trying to add a class to the TD's that doesn't contain any text so that I can remove them all using Jquery. Here's the HTML:

<!DOCTYPE html>
<html>

<head>
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="myjavascript.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="mycss.css">

</head>

<body>



<table class="counter">


<tr>
<th colspan="2">Goalkeepers</th><th colspan="2">Defenders</th>
<th colspan="2">Midfielders</th><th colspan="2">Forwards</th>
</tr>

<tr>
<td>1 Wojciech Szczesny<td>0</td></td>
<td>3 Bacary Sagna<td>0</td></td>
<td>7 Tomas Rosicky<td>0</td></td>
<td>9 Lukas Podolski<td>0</td></td>
</tr>

<tr>
<td>13 Emiliano Viviano<td>0</td></td>
<td>6 Laurent Koscielny<td>0</td></td>
<td>8 Mikel Arteta<td>0</td></td>
<td>12 Olivier Giroud<td>0</td></td>
</tr>

<tr>
<td>21 Lukasz Fabianski<td>0</td></td>
<td>4 Per Mertesacker<td>0</td></td>
<td>10 Jack Wilshere<td>0</td></td>
<td>14 Theo Walcott<td>0</td></td>
</tr>

<tr>
<td><td>0</td></td>
<td>5 Thomas Vermaelen<td>0</td></td>
<td>16 Aaron Ramsey<td>0</td></td>
<td>15 Alex Oxlade-Chamberlain<td>0</td></td>
</tr>

<tr>
<td><td>0</td></td>
<td>28 Kieran Gibbs<td>0</td></td>
<td>11 Mesut Ozil<td>0</td></td>
<td>22 Yaya Sanogo<td>0</td></td>
</tr>

<tr>
<td><td>0</td></td>
<td>17 Nacho Monreal<td>0</td></td>
<td>20 Mathieu Flamini<td>0</td></td>
<td>23 Nicklas Bendtner<td>0</td></td>
</tr>

<tr>
<td><td>0</td></td>
<td>25 Carl Jenkinson<td>0</td></td>
<td>24 Abou Diaby<td>0</td></td>
<td>31 Ryo Miyaichi<td>0</td></td>
</tr>

<tr>

<td><td>0</td></td>
<td><td>0</td></td>
<td>58 Gedion Zelalem<td>0</td></td>
<td>44 Serge Gnabry<td>0</td></td>
</tr>



<tr>
<td><td>0</td></td>
<td><td>0</td></td>
<td>29 Kim Kallstrom<td>0</td></td>
<td><td>0</td></td>
</tr>


<tr>
<td><td>0</td></td>
<td><td>0</td></td>
<td>19 Santi Cazorla<td>0</td></td>
<td><td>0</td></td>
</tr>

</table>







</body>
</html>

And here is the Jquery that would remove them:

 $("tr td:contains('')").each(function(){
  $(this).siblings('td.hideClass').css('visibility' , 'hidden');

 });

I tried using: $(tr td:contains(' ')").addClass("hideClass");

But that didn't work. Any help appreciated!

Upvotes: 1

Views: 547

Answers (4)

Radu Chelariu
Radu Chelariu

Reputation: 446

You seem to actually be looking to hide all TDs that contain '0' rather than all empty TDs. If you're looking to hide all empty elements, @Ionică Bizău 's answer is fine (using empty();). If you're looking for specific characters, you can still use contains, but you have to be very specific about descendants.

Here's a Fiddle-diddle: http://jsfiddle.net/sickdesigner/5pMcJ/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

use:

$("tr td").each(function(){
  if($(this).html()===""){
   //add class using $(this).addClass('classname');
 }
});

Upvotes: 4

Ionică Bizău
Ionică Bizău

Reputation: 113365

You can also use :empty selector:

$("td:empty").addClass('hideClass')

:empty Selector

Description: Select all elements that have no children (including text nodes).

JSFIDDLE

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388316

I think you need to try

jQuery(function($){
    $("tr td").filter(function () {
        return $.trim($(this).text()) == ''
    }).addClass('hideClass')
})

Note: In your sample the first set of tds are not properly closed - <td><td>0</td></td> should be <td></td><td>0</td>

Upvotes: 6

Related Questions