JSFiddle - React, Tailwind, and code Playground

by Jude Duran

HTML

<input id="changeLabelTextTbx" type="textbox"/>

<input id="hiddenChangeLabelTextTbx" type="hidden"/>

<div id="test">test</div>

JavaScript

$("#changeLabelTextTbx").live("keyup", function (event) {
        var currentLabel = $("#test");
        $("#hiddenChangeLabelTextTbx").text($("#changeLabelTextTbx").val() + ":");
        currentLabel.attr("customlabel", (currentLabel.text()).replace(":", ""));
        if ($("#hiddenChangeLabelTextTbx").width() <= maxLabelWidth) {
            currentLabel.text($("#changeLabelTextTbx").val() + ":");
        }

        var totalColspan = 0;
        var deleteOrAddCell = 0;
        totalColspan = Math.ceil((currentLabel.width() + 5) / currentCellWidth); //cells consumed by new control width, add 5px for borders and padding
        if (totalColspan > parseInt(currentLabel.closest(".label").attr("colspan"))) { //if control was elongated
            deleteOrAddCell = totalColspan - parseInt(currentLabel.closest(".label").attr("colspan")); //compute cell to be deleted
            for (ctr = 1; ctr <= deleteOrAddCell; ctr++) {
                currentLabel.closest(".label").prev("td").remove(); //delete extra cells
            }
        }
        else if (totalColspan < parseInt(currentLabel.closest(".label").attr("colspan"))) {
            deleteOrAddCell = parseInt(currentLabel.closest(".label").attr("colspan")) - totalColspan; //compute cell to be deleted
            for (ctr = 1; ctr <= deleteOrAddCell; ctr++) {
                currentLabel.closest(".label").before("<td class='empty'></td>"); //add cells
            }
        }
        currentLabel.closest(".label").attr("colspan", totalColspan);
    });