<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
table{
width: 500px;
border: 1px solid gray;
margin-top: 30px;
border-collapse: collapse;
}
th,td{
line-height: 35px;
text-align: center;
border: 1px solid gray;
}
a{
line-height: 35px;
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
var count = 1; //计数器1 后面有用
var count2 = 0; //计数器2 后面有用
function plusinp(){ //增加input输入框与前面的文字
var di = document.createElement('div'); //做个盒子装着输入框与文字 没啥用
for (var i = 0; i < arguments.length; i++) { //循环置入参数
window["w"+i] = pluswrite(arguments[i]); //循环定义变量 调用函数创建文字(write)
window["inp"+i] = document.createElement('input'); //循环定义变量 创建input
window["inp"+i].value = ''; //将input值放空 方便下面点击事件对input值的判断
di.appendChild(window["inp"+i]); //将input放进div
di.insertBefore(window["w"+i],window["inp"+i]); //对应顺序将文字放到对应的input前面(after不能用/实验失败...)
count2++; //计数器2在点击事件会调用到 暂时没用
}
var but = document.createElement('button'); //增加按钮
but.innerHTML = '增加';
but.setAttribute("id","but"); //给按钮一个ID方便找到
di.appendChild(but);
return di;
}
function pluswrite(argument) { //写文字 用span装着
var span = document.createElement('span');
span.innerHTML = argument;
return span;
}
function gettable() { //做表格
var table = document.createElement('table');
var tr = gettag("tr"); //照抄老师的gettag函数,视频有
for (var i = 0; i < arguments.length; i++) {
var th = getTh(arguments[i]); //这个地方需要特别点的参数,又不想在gettag里加if索性重写一个函数
tr.appendChild(th);
}
table.appendChild(tr);
return table;
}
function gettag(tagName){ //下面三个function都是一样的,尤其是2和3,只不过懒得弄了
var tag = document.createElement(tagName);
return tag;
}
function getTh(argument) {
var tag = document.createElement('th');
tag.innerHTML = argument;
return tag;
}
function getTd(argument) {
var tag = document.createElement('td');
tag.innerHTML = argument;
return tag;
}
function del(c){
c.childNodes[4].onclick = function(){
if (count==2) {
c.parentNode.removeChild(c);
count--;
a.removeChild(a.childNodes[0]);
document.body.removeChild(document.body.childNodes[4]);
console.log(document.body.childNodes[4]);
}
else{
c.parentNode.removeChild(c);
count--;
console.log(document.body.childNodes);
}
}
}
var b = plusinp("编号:","姓名:","年龄:","住址:"); //最上面的文字与input
document.body.appendChild(b);
var a = ''; //a是table,本来想放进下面点击函数里面的,后来发现tr都要加进去,于是就全局了
document.getElementById('but').onclick = function (){
if(window["inp"+0].value==''||window["inp"+1].value==''||window["inp"+3].value==''){ //判定条件第124框不能为空,年龄无所谓了,然后应该加个confirm提示框,没做;而且因为之前放空了input,所以能这样检测,不设空好像不行。
alert('输入不能为空');
for (var i = 0; i < count2; i++) {
window["inp"+i].value=''; //把输入错误的清除
}
}
else if (count == 1){ //计数器1的作用 检测你是否第一次点击增加按钮 判断是否添加表头
a = gettable("编号","姓名","年龄","住址",'操作');
document.body.appendChild(a);
var tr = gettag("tr");
var oa = document.createElement('a');
oa.innerHTML = '删除';
oa.href = "#";
tr.appendChild(oa);
for (var i = 0; i < count2; i++) { //计数器2的作用 通过你给的参数的数量决定input的数量
var td = getTd(window["inp"+i].value);
tr.insertBefore(td,oa);
window["inp"+i].value='';
}
del(tr);
a.appendChild(tr);
count++; //计数器1++
}
else{
var tr = gettag("tr");
var oa = document.createElement('a');
oa.innerHTML = '删除';
oa.href = "#";
tr.appendChild(oa);
for (var i = 0; i < count2; i++) {
var td = getTd(window["inp"+i].value);
tr.insertBefore(td,oa);
window["inp"+i].value='';
}
del(tr);
a.appendChild(tr);
count++;
}
}
</script>
</body>
</html>
其中BUG比较多,window[“img”+i]等变量可以用数组替代,多个函数可以整合,
以下代码就是数组的操作。
<script type="text/javascript">
var x = [],y = [],a,b;
for (var i = 0; i < 6; i++) {
x[i] = document.createElement('img');
document.body.appendChild(x[i]);
}
a = document.createElement('img');
a.src = "images/second1.png";
document.body.insertBefore(a,x[2]);
b = document.createElement('img');
b.src = "images/second1.png";
document.body.insertBefore(b,x[4]);
function changetime() {
var d = new Date();
y[0] = parseInt(d.getHours()/10);
y[1] = d.getHours()%10;
y[2] = parseInt(d.getMinutes()/10);
y[3] = d.getMinutes()%10;
y[4] = parseInt(d.getSeconds()/10);
y[5] = d.getSeconds()%10;
for (var i = 0; i < 6; i++) {
x[i].src = "images/"+y[i]+".png";
}
}
changetime();
setInterval(changetime,1000);
</script>