drakon4860,
<html>
<head>
<title> </title>
<script>
function add2() {
var trArr = table.getElementsByTagName("tr");
for (var i = 0, l = trArr.length; i < l; i++) {
var newCell = trArr[i].insertCell(0);
}
newCell.width = 42;
newCell.height = 42;
}
function add1() {
var row = table.insertRow();
var colCount = table.rows[0].cells.length;
for (i = 0; i < colCount; i++) {
var cell = row.insertCell();
}
cell.height = 50;
cell.width = 42;
}
window.addEventListener("DOMContentLoaded", function() {
var table = document.querySelector("table");
var btn = document.querySelectorAll(".btn");
var timer;
table.addEventListener("mousemove", function(event) {
var el = event.target;
if (el.tagName == "TH" || el.tagName == "TD") {
window.clearTimeout(timer);
var x = el.cellIndex;
var tr = el.parentNode;
var pos = tr.getBoundingClientRect();
btn[0].style.left = pos.left - 60 + "px";
btn[0].style.top = pos.top - 8 + "px";
var y = tr.rowIndex;
btn[1].style.left = pos.left - 4 + x * 56 + "px";
btn[1].style.top = pos.top - 10 - (y + 1) * 52 + "px";
btn[0].dataset.row = y;
btn[1].dataset.cell = x;
document.body.classList.remove("hideBtn");
}
});
table.addEventListener("mouseleave", function(event) {
window.clearTimeout(timer);
timer = window.setTimeout(function() {
document.body.classList.add("hideBtn");
}, 3000);
});
btn[0].addEventListener("click", function(event) {
var index = this.dataset.row;
var tr = table.querySelectorAll("tr");
console.log(index);
if (tr[index] && tr.length > 1) {
tr[index].parentNode.removeChild(tr[index]);
}
document.body.classList.add("hideBtn");
});
btn[1].addEventListener("click", function(event) {
var index = this.dataset.cell;
var tr = table.querySelectorAll("tr");
[].forEach.call(tr, function(el) {
console.log(index);
if (el.cells[index] && el.cells.length > 1) {
el.removeChild(el.cells[index]);
}
});
document.body.classList.add("hideBtn");
});
});
</script>
</head>
<body class="hideBtn">
<div>
<style>
table {
background: white;
color: white;
border: 1px solid DodgerBlue;
margin-top: 20%;
margin-left: 45%;
}
td, tr {
background: DodgerBlue;
padding: 5px;
}
body {
position: relative;
}
.btn {
position: absolute;
background-color: #B20000;
height: 50px;
width: 50px;
color: #FFFFFF;
text-align: center;
line-height: 40px;
font-size: 25pt;
}
body.hideBtn .btn{
display: none;
}
</style>
</div>
<br>
<div>
<table id="table" border="1">
<tr>
<th width="50px" height="50px" ></th>
<th width="50px" height="50px" ></th>
<th width="50px" height="50px" ></th>
<th width="50px" height="50px" ></th>
</tr>
<tr>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
</tr>
<tr>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
</tr>
<tr>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
<th width="50px" height="50px"></th>
</tr>
</table>
</div>
<div class="btn">-</div>
<div class="btn">-</div>
<form>
<p><input type="button" class="b1" value="+" onclick="add1()"></p>
<style>
.b1 {
width: 50px;
height: 50px;
background: Orange;
border: 0px solid Orange;
color: white;
font-size: 25pt;
margin-top: -1%;
margin-left: 45%;
cursor: pointer;
}
</style>
</form>
<form>
<p><input type="button" class="b4" value="+" onclick="add2()"></p>
<style>
.b4 {
width: 50px;
height: 50px;
background: Orange;
border: 0px solid Orange;
color: white;
font-size: 25pt;
margin-top: -19.4%;
margin-left: 41.4%;
cursor: pointer;
}
</style>
</form>
</body>
</html>