JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

Кол-во мест: <input type="text" id="booking"><input type="button" id="go" value="заказать">

<p><span>Красным</span> выделены места, которые уже якобы забронированы.</p>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" class="already">B</td>
        <td class="already">B</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td class="already">B</td>
        <td class="already">B</td>
        <td class="already">B</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

td {
    padding: 20px;
    border: 1px solid #900;
    background: #FFF;
}
.already {
    background: #F00;
}
.booking {
    background-color: #FF0;
}
table {
    float: left;
    margin: 20px 20px 0 0;
}
p {
    margin-top: 10px;
}
p span {
    font-weight: bold;
    color: #F00;
}
}

JavaScript

var allTables = {
    0:{
        t1:[0,0,0],
        t2:[0,0],
        t3:[0,0],
        t4:['reserv1','reserv1'],
        t5:[0,0,0]
    },
    1:{
        t1:['reserv2','reserv2','reserv2'],
        t2:[0,0],
        t3:[0,0],
        t4:[0,0],
        t5:[0,0,0]
    },
    2:{
        t1:[0,0,0],
        t2:[0,0],
        t3:[0,0],
        t4:[0,0],
        t5:[0,0,0]
    }
};
var table;
function findEmptyPlace(n,z){
    table = allTables[z];
    var propCount = Object.keys(table).length;
    var tmpKey = '';
    // проверяем кол-во подряд идущих мест
    var emptyPlaces = {};
    var emptyRowPlaces = {};
    var cntTogether = 0;
    var indx1 = 0;
    var indx2 = 0;
    for(var i = 1, k = 0; i <= propCount; i++){
        var cntInRow = 0;
        for(var j = 0; j < table['t' + i].length; j++){
            if(table['t' + i][j] === 0){
                cntTogether++;
                cntInRow++;
                if(indx1 === 0){
                    indx1 = 't'+i;
                }
            } else {
                if(cntTogether){
                    emptyPlaces[indx1] = cntTogether;
                    cntTogether = 0;
                    indx1 = 0;
                }
            }
        }
        emptyRowPlaces['t'+i] = cntInRow;
    }
    if(cntTogether){
        emptyPlaces[indx1] = cntTogether;
    }
    // если точное совпадение кол-ва человек
    // и подряд идущих мест
    for(var key in emptyPlaces){
        if(emptyPlaces[key]==n)
            return key;
    }
    // если совпадение кол-ва человек
    // и мест за одной секцией стола
    for(key in emptyRowPlaces){
        if(emptyRowPlaces[key] == n)
            return key;
    }
    // оптимальный подбор из нескольких секций стола   
    function selectOptim(c){
        var tSet = [];
        var tmp = 0;
        var nn = n;
        for(i = c; i <= Object.keys(emptyRowPlaces).length; i++){
            if(emptyRowPlaces['t' + i] !== 0){
                tSet.push('t'+i);
                tmp = nn -...