Hi I have a table containing rows. When page loads I am hiding the rows with odd numbers (they contain details). When I click the row (even number) it display the next row (the row with details). please see the jsfiddle example.
<table>
<tr>
<th>Name</th>
<th>Title</th>
<th>Details</th>
</tr>
<tr>
<td>Faisal</td>
<td>Applicaiton Developer</td>
<td>Work in Aid</td>
</tr>
<tr>
<td colspan="2">this is Faisal Details</td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="cancel" />
</td>
</tr>
<tr>
<td>Fabrizio </td>
<td>Applicaiton Developer</td>
<td>Work in Aid</td>
</tr>
<tr>
<td colspan="2">this is Fabrizio </td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
<tr>
<td>Kelly </td>
<td>Applicaiton Developer</td>
<td>Work in Aid</td>
</tr>
<tr>
<td colspan="2">this is Kelly </td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
<tr>
<td>Hillary </td>
<td>Applicaiton Developer</td>
<td>Work in Aid</td>
</tr>
<tr>
<td colspan="2">this is Hillary </td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
<tr>
<td>Krista </td>
<td>Applicaiton Developer</td>
<td>Work in Aid</td>
</tr>
<tr>
<td colspan="2">this is Krista </td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
<tr>
<td>Justin </td>
<td>Applicaiton Developer</td>
<td>Work in Aid</td>
</tr>
<tr>
<td colspan="2">this is Justin </td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
<tr>
<td>Eric </td>
<td>Applicaiton Developer</td>
<td>Work Aid</td>
</tr>
<tr>
<td colspan="2">this is Eric </td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
<tr>
<td>Faisal </td>
<td>Applicaiton Developer</td>
<td>Work inAid</td>
</tr>
<tr>
<td colspan="2">this is Faisal Details</td>
<td>
<input type="button" value="Approve" class="approve" />
<input type="button" value="Deny" class="deny" />
<input type="button" value="Cancel" class="deny" />
</td>
</tr>
</table>
$("table tr:nth-child(odd)").css("display", "none");
var prevRowIndex;
$("table tr:not(:first-child)").click(function (e) {
if (prevRowIndex != undefined) {
$(prevRowIndex).css("display", "none");
prevRowIndex = null;
}
var styles = {
"border": "#000",
"margin-bottom": "10px"
};
prevRowIndex = $(this).next();
//$(this).css("z-index", "9999");
$(this).next().slideDown('slow');
});
$(".approve").click(function (e) {
if (confirm("Are you sure you would like to approve this request?") == false) {
e.preventDefault();
$(this).parents("tr").css("display", "block");
}
});
$(".deny").click(function (e) {
if (confirm("Are you sure you would like to deny this request?") == false) {
$(this).parents("tr").css("display", "block");
e.preventDefault();
}
});
$(".cancel").click(function (e) {
if (confirm("Are you sure you would like to cancel this request?") == false) {
$(this).parents("tr").css("display", "block");
e.preventDefault();
}
});
When a button is click (which is inside the detail row), it first ask for confirmation. My issue is when I select "cancel" in the confirmation dialog box, it hides the details row.
I hope I had explained it properly. Any help on this is appreciated.
OK - you're not stopping propagation and hence the first listener $("table tr:not(:first-child)").click(function (e) { is fired even when you click on the buttons and removing/hiding the row where the buttons are.
This will work.
$(".approve").click(function (e) {
if (confirm("Are you sure you would like to approve this request?") == false) {
e.stopPropagation();
}
});
$(".deny").click(function (e) {
if (confirm("Are you sure you would like to deny this request?") == false) {
e.stopPropagation();
}
});
$(".cancel").click(function (e) {
if (confirm("Are you sure you would like to cancel this request?") == false) {
e.stopPropagation();
}
});