动态添加/删除行和列

Question

我想实现动态添加div块。那个div块将是一个正方形。当您单击添加水平时将添加一个新的方块，并在您单击垂直时。但问题是，如果我在水平方向上添加了5个方格，那么添加垂直方格的内容必须用另外4个水平方格填充。

Jsfiddle sample

Answer 1

更新： fiddle

function addCol() {
	var rows = document.getElementsByClassName("row");
	for (var i = 0; i < rows.length; i++) {
		var square = rows[i].getElementsByClassName("square")[0];
		var newSquare = square.cloneNode(true);
		rows[i].appendChild(newSquare);
	}
	
	var delCol = document.getElementById("delCol");
	var squares = rows[0].getElementsByClassName("square");
	delCol.style.marginLeft = 4 + (squares.length * 52) + "px";
}

function addRow() {
	var grid = document.getElementById("grid");
	var rows = document.getElementsByClassName("row");
	var newRow = rows[0].cloneNode(true);
	grid.appendChild(newRow);
	
	var delRow = document.getElementById("delRow");
	delRow.style.marginTop = 2 + (rows.length-1) * 52 + "px";
}

function delCol() {
	var rows = document.getElementsByClassName("row");
	for (var i = 0; i < rows.length; i++) {
		rows[i].removeChild(rows[i].lastChild);
	}
	
	var delCol = document.getElementById("delCol");
	var marginLeft = parseInt(getComputedStyle(delCol).marginLeft, 10);
	delCol.style.marginLeft = marginLeft - 52 + "px";
}

function delRow() {
	var grid = document.getElementById("grid");
	grid.removeChild(grid.lastChild);
	
	var delRow = document.getElementById("delRow");
	var marginTop = parseInt(getComputedStyle(delRow).marginTop, 10);
	delRow.style.marginTop = marginTop - 52 + "px";
}

body {
	margin: 0;
}
#container {
	overflow: auto;
	-webkit-user-select: none;
}
#delCol {
	margin-left: 56px;
}
#delRow {
}
.delWrapper {
	overflow: auto;
}
#delColContainer {
	clear: both;
}
#delRowContainer {
	display: table;
	float: left;
}
#gridWrapper {
	display: table;
	float: left;
}
#grid {
	float: left;
	border: 1px solid #4dabe4;
}
.row {
	overflow: auto;
}
.square {
	float: left;
	width: 50px;
	height: 50px;
	background: #4dabe4;
	margin: 1px;
}
.controls {
	width: 50px;
	height: 50px;
	margin: 2px;
	cursor: pointer;
	opacity: .75;
}
.controls:hover {
	opacity: 1;
}
.controls.add {
	background: #f1a417;
	float: left;
}
.controls.del {
	background: #b00100;
	float: left;
}
.controls p {
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
#addRow {
	clear: both;
}

<div id="container">
    <div class="delWrapper" id="delColContainer">
        <div class="controls del" id="delCol" onclick="delCol()">
            <p>-</p>
        </div>
    </div>
    <div class="delWrapper" id="delRowContainer">
        <div class="controls del" id="delRow" onclick="delRow()">
            <p>-</p>
        </div>
    </div>
    <div id="gridWrapper">
        <div id="grid">
            <div class="row">
                <div class="square">&nbsp;</div>
            </div>
        </div>
        <div class="controls add" id="addCol" onclick="addCol()">
            <p>+</p>
        </div>
        <div class="controls add" id="addRow" onclick="addRow()">
            <p>+</p>
        </div>
    </div>
</div>

---

OLD (fiddle)

function addCol() {
  var rows = document.getElementsByClassName("row");
  for (var i = 0; i < rows.length; i++) {
    var square = rows[i].getElementsByClassName("square")[0];
    var copy = square.cloneNode(true);
    rows[i].appendChild(copy);
  }
}

function addRow() {
  var main = document.getElementById("main");
  var rows = document.getElementsByClassName("row");
  var copy = rows[0].cloneNode(true);
  main.appendChild(copy);
}

.index {
  display: table;
}
#main {
  float: left;
  display: table;
  border: 1px solid #4dabe4;
}
.square {
  float: left;
  width: 50px;
  height: 50px;
  background: #4dabe4;
  margin: 1px;
}
.controls {
  float: left;
  width: 50px;
  height: 50px;
  background: #f1a417;
  margin: 2px;
  cursor: pointer;
  opacity: .75;
}
.controls:hover {
  opacity: 1;
}
.controls p {
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
#addRow {
  clear: both;
}

<div class="index">
  <div id="main">
    <div class="row">
      <div class="square">&nbsp;</div>
    </div>
  </div>
  <div class="controls" id="addCol" onclick="addCol()">
    <p>+</p>
  </div>
  <div class="controls" id="addRow" onclick="addRow()">
    <p>+</p>
  </div>
</div>