动态添加/删除行和列
Dynamically add/remove rows and columns
我想实现div
块的动态添加。那个div
块将是一个正方形。当您单击添加水平面时,将添加一个新的正方形,而当您单击垂直面时。但问题是,如果我在水平方向上加了5个正方形,那么在垂直方向上加上什么呢?它必须用另外4个水平方向的正方形填充。
Jsfidle样本
更新: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"> </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>
旧(小提琴)
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"> </div>
</div>
</div>
<div class="controls" id="addCol" onclick="addCol()">
<p>+</p>
</div>
<div class="controls" id="addRow" onclick="addRow()">
<p>+</p>
</div>
</div>
相关文章:
- 向具有唯一Id的表添加/删除行
- 添加 jQuery UI 后,从表中删除行的函数不起作用
- 在 html 表中动态添加/删除行
- 如何在 Firefox 插件 XUL 树中添加和删除行
- 通过用户仅使用 javascript 从文本框输入从 html 表中添加和删除行
- 如何使用 jQuery 添加带有行的删除和添加按钮
- 动态添加/删除行和列
- 使用jquery从html表中删除动态添加的行时出现问题
- 如何使用DOM更改HTML表第一行中的按钮?(添加和删除行DOM)
- 我如何在<选择>并在jquery中的每行添加一个删除按钮
- 使用jquery从表中删除动态添加的行
- Bootstrap 3:添加确认模式框jQuery内联删除行
- 单击字形图标时向表行添加类,再次单击时删除类
- 从表单中添加/删除行.重置整个表单
- 如何在html表中只使用java脚本显示json数据,并根据json数据动态添加和删除行
- 如何从html表中添加和删除行
- 使用javascript在html中动态添加/删除行
- 如何在jQuery的clone()方法中为新添加的表行添加删除按钮
- 如何在添加和删除行时重新排列表行号
- 如何在每行添加删除按钮