Вот что у меня получилось не могу разобраться с удалением!
<html>
<head>
<title> </title>
<script language="JavaScript">
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;
}
</script>
</head>
<body>
<div>
<style>
table {
background: white;
color: white;
border: 1px solid DodgerBlue;
margin-top: 20%;
margin-left: 45%;
}
td, tr {
background: DodgerBlue;
padding: 5px;
}
</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>
<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>