How can I find each table cell's “visual location” using jQuery?

Question

I have a HTML table that contains both ROWSPANs and COLSPANs.

How can I find each cell\'s \"visual location\" using jQuery?

For example, here\'s a visual rep

Answer 1

Here a jQuery solution that is able to handle complex table structure. This solution use the Open Source WxT Table Parser available here: https://raw.github.com/wet-boew/wet-boew/master/src/js/dependencies/parserTable.js

You will find the documentation in the Table Usability Concept Github Repository. Use the API documentation that is under "Table Parser - WET 3.0 release".

The table parsing is done by using the HTML tabular markup and the visual relationships between the data cell (td) and the header cell (th)

// Used to get the reference to the WxT table parser
var _pe = window.pe || {
    fn : {}
};

// For each table elements
$('table').each(function () {

    var $tbl = $(this);

    // Parse the table
    _pe.fn.parsertable.parse($tbl);

    // For each data cell
    $('td', $tbl).each(function () {

        var $td = $(this),
            tblparser;

        // Get the API structure as defined under "Table Parser - WET 3.0 release" (https://github.com/duboisp/Table-Usability-Concept/blob/master/API/td.md#table-parser---wet-30-release)
        tblparser = $td.data().tblparser;

        // Set the cell location (x, y)
        $td.html(tblparser.row.rowpos + ', ' + tblparser.col.start);


    });
});

You will find a working example here: http://jsfiddle.net/TVttA/

Cheers

:-)