• Choose a category
• All
• Classic-Fiction

var $button = $(button);

var $row = $button.parents('tbody tr');

var $cells = $row.children('td').not('.edit');

if ($row.data('flag')) { // in edit mode, move back to table

// cell methods

$row.data('flag', false);

$button.text('Edit');

}

else { // in table mode, move to edit mode

// cell methods

$row.data('flag', true);

$button.text('Save');

}

};

The live click event from TABLE.formwork passes in the button for the row we want to edit, so we’ll use that to cache references to the parent row and the other cells it contains. We use parents on the $button object to find the row, and children on the $row—excluding the edit cell with not—to find all the other cells.

In the if statement, we set a data flag to let us know that the row is in edit mode, and change the button text to reflect that. All that remains is to switch out the cell contents.

We’ll look at the code in reverse order, to present the simpler code first. The easiest part of what we need to do is exit edit mode:

chapter_08/09_editable_table_cells/script.js (excerpt)

$cells.each(function () {

var _cell = $(this);

_cell.html(_cell.find('input').val());

});

To move out of edit mode, we take the val of the input in the _cell, and add it as the _cell’s html. Since we need to refer to the cell more than once (even if it’s only twice!), we save it in a variable first to speed up performance.

Now for the code required to change into edit mode:

chapter_08/09_editable_table_cells/script.js (excerpt)

$cells.each(function () {

var _cell = $(this);

_cell.data('text',_cell.html())

.html('');

var $input = $('')

.val(_cell.data('text'))

.width(_cell.width() - 16);

_cell.append($input);

});

To make the cells editable is only slightly trickier. We’ll need to empty out the current cell contents before we can add in the inputs, or we’ll break the layout. Before we empty each cell, though, we store the current contents in data so we can use them later.

We’re going to append an input we create, and as we have seen, it’s important to manipulate anything we create before we add it to the DOM. The input’s width is set smaller than the width of the cell to avoid any layout breakage, and we grab the data we just saved to serve as the input element’s default value.

Try it out, and you’ll be impressed by how smoothly it works. Bet you’re starting to feel like a ninja now!

DataTables Plugin

We’ve started down the path of creating a reusable data grid. There are infinite number of ways to go from here; the table could do with being sortable by column, or searchable—we could pack it with every crazy feature imaginable. But if you’re pressed for time, and need a lot of features fast, you’ll want to research the plugin options that are out there, such as the DataTables plugin.

DataTables is a truly impressive plugin for turning your HTML tables into fully functional data grids, complete with pagination, column sorting, searching, ThemeRoller support, Ajax loading, and more. As always, the decision to use a plugin or build custom functionality comes down to how much time you have, how many features you need, and how big a file you’re willing to serve to your visitors. Oh, and also how much fun you think you’d have developing the functionality yourself!

For the moment we’ve been able to add all the features required for our client’s table-based needs on our own, and we’ve learned a lot about jQuery in doing it. Before we move on to the next (and final) chapter, let’s revisit our check-all checkboxes in the context of tables.

Selecting Rows with Checkboxes

Another feature that the public are becoming increasingly used to having is the ability to select rows of a table (or any kind of list) by checking a checkbox associated with the row. As well as selections being able to be made on an individual basis, there are often shortcuts for selecting all items, selecting none, or inverting the current selection of checkboxes. None of this is new to us: we’ve already built check-all checkboxes and selection-inverting buttons.

But,