JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
<script>
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(0);
}
</script>
</body>
</html>
CSS
.cols{
display: inline-block; width: 180px; height: 180px; margin: 8px;
background: red; border: 1px solid black;
}
.rows{
padding: 5px; background: yellow; border-top: 1px solid black;
border-bottom: 1px solid black;
}
JavaScript
var cursorObj = document.body; //наш объект для отслежки курсора
var tds = cursorObj.getElementsByTagName("td"); //все TD в нашем cursorObj
var colors = new Array("red","blue","grey","green"); //массив цветов
//меняем расцветку из массива colors, для всех TD с классами cols
for(var i = 0; i<tds.length; i++){
if(tds[i].getAttribute("class") == "cols"){
tds[i].style.background = colors[Math.floor(Math.random()*colors.length)];
}
}
//отслеживаем курсор мышки над cursorObj
cursorObj.onmouseover = function(e){
e = e || event;
var target = e.target || e.srcElement;
var tdParent = target.parentNode;
//фильтруем объекты TD
if(target.tagName == "TD"){
//фильтруем объекты TD по цветам. В данном случае red(красный) и blue(синий)
if(target.style.backgroundColor == "red" || target.style.backgroundColor == "blue"){
target.onclick = function(){
tdParent.removeChild(target); //удаляем текущий объект
}
}
}
}