JSFiddle - React, Tailwind, and code Playground

by duboisp2

HTML

<script src="https://raw.github.com/wet-boew/wet-boew/master/src/js/dependencies/parserTable.js"></script>
<table cellspacing="0" border="1">
            <thead>
                <tr>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td rowspan="2">Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>Cell</td>
                    <td colspan="2">Cell</td>
                    <td rowspan="2">Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td colspan="2">Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>Cell</td>
                    <td colspan="2">Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
                <tr>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                    <td>Cell</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Header</th>
                    <td>Cell</td>
                   ...

CSS

th { font-weight: bold; }

JavaScript

(function ($) {
    $(document).ready(function() {

        // 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);
                
                
            });
        });
    });

}(jQuery));