Here's the code:
Code: Select all
<table class="container">
<tr>
<th>id</th>
<th>Name</th>
<th>Location</th>
<th>PostCode</th>
<th>Telephone</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr>
<td class='editable'>1</td>
<td class='editable'>John Doe</td>
<td class='editable'>Georgia</td>
<td class='editable'>2700</td>
<td class='editable'>210001122</td>
<td align='center'><a href='#' class='Edit'><img src='img/edit_icon.png' /></a>
</td>
<td align='center'><a href="rowdelete.php?id=1" class='Delete'><img src='img/delete_icon.png' /></a></td>
</tr>
<tr>
<td class='editable'>2</td>
<td class='editable'>Shawn Guerrero</td>
<td class='editable'>Mexico</td>
<td class='editable'>1000</td>
<td class='editable'>112223388</td>
<td align='center'><a href='#' class='Edit'><img src='img/edit_icon.png' /></a></td>
<td align='center'><a href="rowdelete.php?id=2" class='Delete'><img src='img/delete_icon.png' /></a></td>
</tr>
</table>
Code: Select all
th {
text-align:left;
background-color: #999;
}
th, td {
padding: 0.4em;
}
table .container {
padding: 0;
width: 20em;
border: 1px solid #666;
}
img {
border: 0;
}
Code: Select all
$(document).ready(function () {
TABLE.formwork('.container');
});
var TABLE = {};
TABLE.formwork = function (table) {
var $tables = $(table);
$tables.each(function () {
var _table = $(this);
_table.find('tr').append($('<th class="Edit">Edit</th>'));
_table.find('tr').append($('<td align="center" class="Edit"><a href="#"><input type="button" value="Edit"></td>'))
//_table.find('tr').append($('<th class="Delete">Delete</th>'));
//_table.find('tr').append($('<td align="center" class="Delete"><a href="#"><img src="img/delete_icon.png" /></a></td>'))
});
$tables.find('.Edit :button').live('click', function (e) { //the problem may be related to THIS line
TABLE.editable(this);
e.preventDefault();
});
}
TABLE.editable = function (button) {
var $button = $(button);
var $row = $button.parents('tr');
var $cells = $row.children('td').not('.Edit');
if ($row.data('flag')) {
// in edit mode, move back to table
// cell methods
$cells.each(function () {
var _cell = $(this);
_cell.html(_cell.find('input').val());
})
$row.data('flag', false);
$button.val('Edit');
} else {
// in table mode, move to edit mode
// cell methods
$cells.each(function () {
var _cell = $(this);
_cell.data('text', _cell.html()).html('');
var $input = $('<input type="text" />')
.val(_cell.data('text'))
.width(_cell.width());
_cell.append($input);
})
$row.data('flag', true);
$button.val('Save');
}
}
Code: Select all
$tables.find('.Edit :button').live('click', function (e) {Is it possible to do what I want using jQuery?