Edit table fields with jQuery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
woot
Forum Newbie
Posts: 8
Joined: Tue Feb 19, 2013 8:35 am

Edit table fields with jQuery

Post by woot »

I want to be able to edit an HTML table's fields using jQuery. The fields should turn to input controls when the "Edit" button is clicked. After searching I found some code which I adapted to my needs and it seems to be working like it should, using said buttons.

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');
    }
}
The problem is, I'd like to use images wrapped within anchors (e.g. <td align="center" class="Delete"><a href="http://mysite.tld/page.php?param=value"><img src="img/delete_icon.png" /></a></td>) as Edit and Delete "buttons", so I'm guessing the problem may related to this piece of code:

Code: Select all

$tables.find('.Edit :button').live('click', function (e) {
. I've searched around (including jQuery's official website) but couldn't seem to find an answer to what other values (if any) are allowed besides ":button".

Is it possible to do what I want using jQuery?
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Edit table fields with jQuery

Post by requinix »

That's pretty much any CSS-esque selector. Give that <a> a class like "button" then

Code: Select all

.Edit a.button
You could probably get away with just ".Edit a" and no class but it doesn't hurt to be specific.
User avatar
woot
Forum Newbie
Posts: 8
Joined: Tue Feb 19, 2013 8:35 am

Re: Edit table fields with jQuery

Post by woot »

As it turns out, it seems like if I simply remove the attribute type (":button") it will work with an image as well.
Thanks requinix.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Edit table fields with jQuery

Post by requinix »

Yes, because it's putting the click event on the entire table cell. Like I said being specific is good but eh, if it works it works.
Post Reply