Here…The code i have added to filter the anchor link is not working.. And i want to know how to hide the spanned rows
<script type="text/javascript">
$(document).ready(function () {
//Add click event for Hide anchor
//This code not working.... why?..
$("table tr td a").filter(function () { return $(this).text() == "Hide"; }).click(function (e) { RowHide(this); return false; })
//working..but want to have filter.. $("table tr td a").click(function (e) { RowHide(this); return false; })
});
function RowHide(obj) {
var index = $(obj).closest("tr").index();
//How to hide the spanned row..i.e on clicking R4R5R6C1 Hide link...should hide R4,R5 & R6
$("table").find("tr:eq(" + index + ") td").each(function () { $(this).hide() });
}
</script>
In this table..Hide is working for all the rows..except spanned row..it’s hiding only one row..
<table style="width:20%;border:1;border-style:solid">
<tr>
<td>
Header 1
<td> Header 2</td>
<td>
Header 3</td>
</tr>
<tr>
<td>
R1C1</td>
<td>
R1C2</td>
<td>
R1C3</td>
</tr>
<tr>
<td>
R2C1<br />
<a href="#"> Hide </a>
</td>
<td>
R2C2</td>
<td>
R2C3</td>
</tr>
<tr>
<td>
R3C1
<br />
<a href="#"> Hide </a>
</td>
<td>
R3C2</td>
<td>
R3C3</td>
</tr>
<tr>
<td rowspan="3">
R4R5R6C1
<br />
<a href="#"> Hide </a>
</td>
<td>
R4C2</td>
<td>
R4C3</td>
</tr>
<tr>
<td>
R5C2</td>
<td>
R5C3</td>
</tr>
<tr>
<td>
R6C2</td>
<td>
R6C3</td>
</tr>
</table>
[edit] I had misunderstood the problem initially.
Try this now, I think it’s what you were after jsFiddle