I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success.
Below is the code snippet:
<%@ 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>
Apologies for cramming everything into a single JSP file. As a beginner with JQuery, any suggestions would be greatly appreciated.