i am generated a table dynamically which looks like this:
Name Action
==== =======
Adam Delete
Joe Delete
Bill Delete
I want "Delete" to be a link that pops up a confirmation popup that says:
"Are you sure you want to delete "Adam"? (Yes, No)
NOTE that "adam" is contextual and needs to be retrieved from the row of the table where the user selected it.
Something like this:
$(document).ready(function() {
$('a.delete').click(function(e) {
//prevent the link from going anywhere
e.preventDefault();
//give me this link's parent (a <td>) and grab the text of the 'prev' one
var name = $(this).parent().prev('td').text();
var answer = confirm("Are you sure you want to delete " + name);
});
});
Assuming you give your delete links the class delete.
This should work on every table structure that you mentioned.
<html>
<head>
<!-- you will need jQuery -->
<script type='text/javascript' src='path/to/jquery.js' ></script>
<script type='text/javascript'>
$(function() {
$("td[innerHTML*='delete']").click(function(e) {
var name = $(this).prev('td').text();
if( confirm("Are you sure you want to delete " + name) )
{
// call ajax to delete this record
// remove tr element
$(this).parent().remove();
}
});
});
</script>
</head>
<body>
<!-- your table -->
<table>
<tr>
<td>Mira</td>
<td>delete</td>
</tr>
<td>Adam</td>
<td>delete</td>
<tr>
<td>Barney</td>
<td>delete</td>
</tr>
<tr>
<td>Scott</td>
<td>delete</td>
</tr>
</table>
</body>
</html>