输入多行多列,并且可以删除
<input type="text" class="row"> 行:<br>
<input type="text" class="col"> 列:<br>
<input type="button" value="提交" class="button"><br>
<div class="box"></div>
<script>
function $(id) {
return document.getElementById(id);
}
function create(tagName) {
return document.createElement(tagName);
}
$('btn').onclick = function() {
var rValue = $('row').value;
var cValue = $('col').value;
var oTable = create('table');
oTable.border = 1;
for (var i = 0; i < rValue; i++) {
var oTr = create('tr');
for (var j = 0; j < cValue; j++) {
var oTd = create('td');
oTd.innerHTML = 'aaa';
oTr.appendChild(oTd);
}
// 再添加一列
var endTd = create('td');
endTd.innerHTML = '<a href="javascript:;">删除</a>';
oTr.appendChild(endTd);
oTable.appendChild(oTr);
}
$('box').appendChild(oTable);
// 给删除绑定单击事件 删除元素是动态创建 事件绑定在函数内
var as = $('box').getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
if (confirm('你确定要删除吗?')) {
this.parentNode.parentNode.remove();
}
}
}
}
</script>