Hide rows in html using JQuery

Question

I want to hide HTML Table row which has 0.00 value in 3rd column. I tried using JQuery and CSS but it doesn't work.

Here is my code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="globalCSS.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script>
$('tr').each(function()
{
    var tr = $(this);
    if (tr.find('td:eq(2)').text()=="0.00") 
        tr.addClass('hidden');
});
</script>

<style>
.hidden
{
    display: none
}
</style>

</head>
<body>

<div>
<table border=1>
    <tbody>
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 0.00 </td>
        </tr>
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 1.00 </td>
        </tr>
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 0.00 </td>
        </tr>
    </tbody>
</table>
</div>

</body>
</html>

Sorry for putting all the things in single jsp file. But I am new with JQuery. Can u anyone please suggest me something?

su8898 · Accepted Answer · 2015-01-11 07:25:47Z

1

Try this. First, put your scripts at the end of the document (It's also the best practice). Trim the <td> text (your example had spaces in td values.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="globalCSS.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">     

<style>
.hidden
{
    display: none
}
</style>

</head>
<body>

<div>
<table border=1>
    <tbody>
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td>0.00</td>
        </tr>
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 1.00 </td>
        </tr>
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 0.00 </td>
        </tr>
    </tbody>
</table>
</div>
<script>
$('tr').each(function()
{
    var tr = $(this);   
    if (tr.find('td:eq(2)').text().trim()=="0.00") 
    {
        tr.addClass('hidden');
}
});
</script>
</body>
</html>

edited Jan 11, 2015 at 7:25

answered Jan 11, 2015 at 7:06

su8898

1,72319 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

su8898 Over a year ago

Sorry, Please Check now

Priyanka Pawar Over a year ago

It doesn't work but thank you for giving me idea of .trim(). up vote is for .trim()

Vitorino fernandes · Accepted Answer · 2015-01-11 07:16:56Z

0

$('tr').each(function () {
  a = $(this).children('td:eq(2)').text();
  if (a == "0.00") {
      $(this).addClass('hidden');
  }
})

demo - http://jsfiddle.net/cc1wefkz/

answered Jan 11, 2015 at 7:16

Vitorino fernandes

16k3 gold badges25 silver badges41 bronze badges

1 Comment

Priyanka Pawar Over a year ago

Can you please tell me? If I have put this in <head> it doesn't work but if I put this after <div> it works properly. Can you please tell me the reason behind this?

jay.jivani · Accepted Answer · 2015-01-11 07:13:43Z

0

$('#tableId tbody tr td:nth-child(2)').each( function(){
   var tr_value = $(this).text();
   if(tr_value == '0.00'){
     $(this).addClass('hidden');
   }       
});

answered Jan 11, 2015 at 7:13

jay.jivani

1,5741 gold badge18 silver badges33 bronze badges

1 Comment

Jason Aller Over a year ago

$(this) is running through the .each of td elements so you'd need to address the parent of the td in order to reach the tr to hide it.

Collectives™ on Stack Overflow

Hide rows in html using JQuery

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related