Как сделать так, чтобы кнопки не сливались в таблице tds - BS4

Question

Темы кнопок начальной загрузки весьма полезны, поэтому я попытался включить их в данные интерактивных таблиц.Независимо от типа td (кнопка или нет), при добавлении классов кнопок в событиях щелчка, tds в той же строке щелкаются будут сливаться.

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<table class="table table-bordered table-sm  table-hover">
<thead>
            <tr>
                    <th scope="col">#</th>
                    <th scope="col">1</th>
                    <th scope="col">2</th>
                    <th scope="col">3</th>
                    <th scope="col">4</th>
                    <th scope="col">5</th>
            </tr>
</thead>
<tbody>
    <tr>
        <td  id="x4y3" name="x4y3" value="-1">_</td>
        <td  id="x2y3" name="x2y3" value="-1">_</td>
    </tr>
</tbody>
</table>
<script>
$("table").on("click", "td", function() {
            //alert(currentModal);
            //alert($(this).val());
            var val = parseInt($(this).attr('value'));
            if(val > 1 || val < -1 || val === NaN) {
                $(this).attr('value', 1);
                $(this).removeClass();
                $(this).addClass('btn btn-success');
            }
            else {
                switch(val) {
                    case -1:
                        $(this).attr('value', 0);
                        $(this).removeClass();
                        $(this).addClass('btn btn-secondary');
                        break;
                    case 0:
                        $(this).attr('value', 1);
                        $(this).removeClass();
                        $(this).addClass('btn btn-success');
                        break;
                    case 1:
                        $(this).attr('value', -1);
                        $(this).removeClass();
                        $(this).addClass('btn btn-danger');
                        break;
                }
            }
        });
    </script>

Скрипка здесь демонстрируетпроблема при нажатии на ячейки.

Answer 1

Похоже, проблема в том, что класс btn имеет "display: inline-block", который портит отображение td как ячейку таблицы.

Я бы предложил добавить кнопку вячейка, вместо того, чтобы сделать саму ячейку кнопкой.

$("table").on("click", "td", function() {
            //alert(currentModal);
            //alert($(this).val());
            var val = parseInt($(this).attr('value'));
            if(val > 1 || val < -1 || val === NaN) {
                $(this).attr('value', 1);
                var btn = $("<button>");
                btn.addClass('btn btn-success');
                $(this).append(btn);
            }
            else {
                switch(val) {
                    case -1:
                        $(this).attr('value', 0);
                        var btn = $("<button>");
                        btn.addClass('btn btn-secondary');
                        $(this).append(btn);
                        break;
                    case 0:
                        $(this).attr('value', 1);
                       var btn = $("<button>");
                    btn.addClass('btn btn-success');
                    $(this).append(btn);
                        break;
                    case 1:
                        $(this).attr('value', -1);
                        var btn = $("<button>");
                btn.addClass('btn btn-danger');
                $(this).append(btn);
                        break;
                }
            }
        });

Это добавит кнопку к таблице каждый раз, когда вы щелкаете по ней. Вам нужно будет добавить код, чтобы предотвратить это.