JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id="wrapper">
    <table>
        <tr>
            <td id="first">
                <table>
                    <tr>
                    <th>N</th>
                    <th>Name<th>
                        </tr>
                    <tr>
                        <td>
                            <input class="numButtons" type="button" value="1"></input>
                        </td>
                        <td>Denis</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <th>Убит</th>
                        <th>№</th>
                        <th>Имя</th>
                        <th>Роль</th>
                        <th colspan="6">Свойства</th>
                    </tr>
                    <tr id="GuardM">
                        <td rowspan="2">Dead</td>
                        <td class="num"></td>
                        <td class="name">Илюша</td>
                        <td>Телохранитель Мафии</td>
                        <td class="prop">Shoot</td>
                        <td class="prop">Poison</td>
                        <td class="prop">Stun</td>
                        <td class="prop">Drunk</td>
                        <td class="prop">Balam</td>
                        <td class="prop">Hack</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button>Заполнить</button>
                        </td>
                        <td>
                            <button>Прикрыть</button>
                        </td>
                        <td class="prop">Heal</td>
                        <td class="prop">M.Heal</td>
                        <td class="prop">Guard</td>
                        <td class="prop">M.Guard</td>
                        <td class="prop shadow">PlusV</td>
                        <td class="prop">Aliby</td>
                    </tr>
               ...

CSS

#wrapper {
    border: 1px dotted black;
    width:800px;
    font-size:14px;
}
th, td {
    text-align:center;
    padding:2px;
}

#first, #second{vertical-align:top;}

.prop {
    width:30px;
    height:30px;
    text-align:center;
    font-size:14px;
}
td, th {
    border: 1px solid silver;
}
button {
    font-size:12px;
}
.shadow {
    -moz-box-shadow: 2px 2px -10px rgba(0, 0, 0, 0.5);
    /* Для Firefox */
    -webkit-box-shadow: 2px 2px -10px rgba(0, 0, 0, 0.5);
    /* Для Safari и Chrome */
    box-shadow: 2px 2px -10px rgba(0, 0, 0, 0.5);
    /* Параметры тени */
}

JavaScript

$('.numButtons').click(function(){
  toFill();
});

var name, num, nameOfRole;

function toFill(){
    that = $(this);
	name = that.html();
    alert(name);
}