JSFiddle - React, Tailwind, and code Playground

by sunnyplus

HTML

<table><thead>
<th>Тип</th><th>Заголовок</th><th>Текст</th><th>Дата</th>
<thead><tbody><tr id='alltr1'>
<td id='td_type1'>ololo</td>
<td>ololo</td>
<td>ololo</td>
<td>ololo</td>
</tr>
<tr id='alltr2'>
<td id='td_type2'>dssdsd</td>
<td>ololo</td>
<td>ololo</td>
<td>ololo</td>
</tr>
</tbody></table>

<div class="table">
<div class="row"><div class="cell">sss</div><div class="cell">dddd</div>
</div>
<div class="row"><div class="cell">eee</div><div class="cell">fff</div>
</div>
</div>

CSS

tr:hover {
  cursor:pointer;
}
.table {
  display:table;
  width:100px;
  height:100px;
  background:#555555;
}
.row {
  cursor:pointer;
  display:table-row;
}
.cell {
 display:table-cell; 
}

JavaScript

var cell1 = document.querySelector(".cell");
Array.prototype.forEach.call(tds,function(cell1){
    var clo = cell1.innerHTML
    cell1.onmouseover = function() { 
        cell1.innerHTML = 'Удалить';
    };
    cell1.onmouseout = function() { 
        cell1.innerHTML = clo;
    };        
});