JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="table">
    <div class="row">
        <div class="cell">
            <input type="text" id="1">
        </div>
        <div class="cell">
            <input type="text" id="2">
        </div>
        <div class="cell">
            <input type="text" id="3">
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <input type="text" id="4">
        </div>
        <div class="cell">
            <input type="text" id="5">
        </div>
        <div class="cell">
            <input type="text" id="6">
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <input type="text" id="7">
        </div>
        <div class="cell">
            <input type="text" id="8">
        </div>
        <div class="cell">
            <input type="text" id="9">
        </div>
    </div>
</div>

CSS

div.table {
    display:table;
}

div.row {
    display:table-row;
}

div.cell {
    display:table-cell;
}

JavaScript

$.expr[':'].display = function(elem, pos, match) {
        return $(elem).css('display') == match[3];
    }

    var tbs = $('input');
    for (var i = 0; i < tbs.length; i++)
    {
        var tb = tbs[i];
        var rowSelector = 'div:display(\'table-row\')';
        var cellSelector = 'div:display(\'table-cell\')';
        var rowIndex = $(tb)
            .parents(rowSelector)
            .filter( function(el) {
                return $(el).css('display') === 'table-row';
            })
            .prevAll(rowSelector)
            .length;
        var colIndex = $(tb).parents(cellSelector).prevAll(cellSelector).length;
        $(tb).val("(" + rowIndex + ", " + colIndex + ")");
        
    }