Rowspan and colspan using jQuery

Sometimes you build things that are useful for one thing, once. Because of this you might not want to spend too much time on a solution. This is such a thing.

THE PROBLEM

To make the story short, a while ago there was a visual form editor (that sounded almost like a fairy tale). The HTML markup that comes from the editor uses tables to layout the form. The editors could insert, add and delete rows and columns but its functionality lacks when it comes to rowspan and colspan. There was no way of doing that. The only way seemed to be using CSS classes added to an form element inside the row/column. So the result was a little jQuery plugin. Separated into two plugin for demonstration purpose.

COLSPAN

This is how the colspan is applied to the form element.

<input type="text" class="colspan3">

And this is how the colspan is applied to the table using jQuery.

/**
 * Closure - The jQuery object will be passed to an anonymous function.
 * $ will be an alias for the jQuery object to use in our plugin.
 */
(function($) {

    // Plugin definition.
    $.fn.colSpan = function () {
        // Define variables.
        var $this, $targetTD, colSpan, selector;

        // Iterate each matched element.
        return this.each(function () {
            // Iterates the elements that has a class name that contains 'colspan'.
            $('[class^="colspan"]', $(this)).each(function () {
                // Store the element in a variable.
                $this = $(this);

                // Get the closest -element.
                $targetTD = $this.closest("td");

                // Gets the colspan value from the class name.
                colSpan = $this.attr("class").substring(7, 8);

                // If the colspan value is a number we will apply colspan.
                if (Number(colSpan) != NaN) {
                    // Add colspan attribute to the parent .
                    $targetTD.attr("colspan", colSpan);

                    // Build a selector that will give us a limited number
                    // of -elements using the colspan value.
                    selector = "td:lt(" + (colSpan - 1) + ")";

                    // Remove -elements to the right.
                    $targetTD.nextAll(selector).remove("td");
                }
            });
        });
    };

})(jQuery);

ROWSPAN

The rowspan plugin has nearly the same approach as the colspan except that you also have to involve the table rows.

<input type="text" class="rowspan2">
/**
 * Closure - The jQuery object will be passed to an anonymous function.
 * $ will be an alias for the jQuery object to use in our plugin.
 */
(function($) {

    // Plugin definition.
    $.fn.rowSpan = function () {
        // Define variables.
        var $this, $targetTD, $targetTR, targetTDIndex, rowSpan, selector;

        // Iterate each matched element.
        return this.each(function () {
            // Iterates the elements that has a class name that contains 'rowspan'.
            $('[class^="rowspan"]', $(this)).each(function () {
                // Store the element in a variable.
                $this = $(this);

                // Get the closest -element.
                $targetTD = $this.closest("td");

                // Get the closest -element.
                $targetTR = $this.closest("tr");

                // Gets the rowspan value from the class name.
                rowSpan = $this.attr("class").substring(7, 8);

                // If the value is a number we will apply colspan.
                if (Number(rowSpan) != NaN) {
                    // Add rowspan attribute to the parent .
                    $targetTD.attr("rowspan", rowSpan);

                    // Gets the index number of the parent -element.
                    targetTDIndex = $targetTD.index();

                    // Build a selector that will give us a limited number
                    // of -elements using the rowspan value.
                    selector = "tr:lt(" + (rowSpan - 1) + ")";

                    // Iterate the table rows.
                    $targetTR.nextAll(selector).each(function () {
                        // The query selects a TD-element on each table row that
                        // equals the target TD index and removes it.
                        $("td:eq(" + targetTDIndex + ")", $(this)).remove();
                    });
                }
            });
        });
    };

})(jQuery);

FINALLY

Using the button below you can download example files of the rowspan and colspan plugin. The ZIP file contain both plugins wrapped into a single JS-file and a HTML document containing a table and some form elements.

download demo