JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="total_width_input"><input type="text" value="500"/><input id="total_width_button" type="button" value="Opdater samlet bredde"/>
    
</div>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr id="width_input_row">
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>   
    <tr id="autorow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr> 
</table>

<!--<input id="keep_fixed_width" type="checkbox" value="Update total width" checked="checked"/><label for="keep_fixed_width">Fasthold såvidt muligt samlet bredde</label>-->

CSS

body { font-family: Arial; font-size:13px; }
table { margin: 20px; }
table tr:nth-child(1) { height: 16px;}
table tr:nth-child(1) td { background: #EFEFEF;}

table tr:nth-child(3) { height: 12px;}
table td { border: 1px solid #CCC; text-align: center; }
table input[type="text"] { width: 25px; margin: 5px 0; border: 1px solid #E5E5E5; }
input[type="button"] { padding: 2px 10px; margin: 0 0 0 5px; }
input[type="checkbox"] { margin-left: 20px; }
label { margin-left: 3px; }



#total_width_input { margin: 20px 0 0 20px; }
    
.isAutoCol { background: lightblue; }

JavaScript

var tableColumnWidthsModel = new Array();

initialize();




function initialize() {

    $("table tr#autorow td:last-child").toggleClass("isAutoCol");

    var numOfColumns = $('td input').parent().parent().children().length;

    equalColumnWidth = getTotalTableWidthFromInput() / numOfColumns;

    for (i = 0; i < numOfColumns; i++) {
        tableColumnWidthsModel[i] = equalColumnWidth;
    }

    displayColumnWidths();

}


$("table tr#width_input_row td input").blur(function() {
    changeColumnWidth($(this).parent().index(), parseInt($(this).val()));
    //changeColumnWidth($(this).parent().index(), $(this).parent().css("width", parseInt($(this).val())));
});


$("table tr#autorow").on("click", "td", function() {
    setAutoCol($(this).index());
});



function setAutoCol(targetIndex) {
    $("table tr#autorow td").eq(targetIndex).siblings().removeClass("isAutoCol");
    $("table tr#autorow td").eq(targetIndex).toggleClass("isAutoCol");
    $("table tr#width_input_row").find("input").removeAttr("disabled");
    if (getIndexOfAutoColumn() >= 0) {
        $("table tr#width_input_row").find("input").eq(targetIndex).attr("disabled", "true");
    }
}


function getTotalTableWidthFromInput() {

    return parseInt($('#total_width_input input').val());

}

function displayColumnWidths() {
    for (i = 0; i < tableColumnWidthsModel.length; i++) {
        $('td input').parents("tr").children().eq(i).attr("width", tableColumnWidthsModel[i]);
        //$('td input').parent().parent().children(i).css("width", tableColumnWidthsModel[i] + "px");
        $('td input').eq(i).val(tableColumnWidthsModel[i]);
    }

}


function changeColumnWidth(colNum, newValue) {
    var indexOfAutoCol = getIndexOfAutoColumn();
    
    if(indexOfAutoCol >= 0) {
        var oldValue = tableColumnWidthsModel[colNum];

        var diff = oldValue - newValue;      
        tableColumnWidthsModel[indexOfAutoCol] += diff;
    }

    tableColumnWidthsModel[colNum] = newValue; 

   ...