<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cl1{color: #FF0000;}
#cl2{color: #FF0000;}
</style>
</head>
<body>
姓名：<input type="text" id="text1"/><span id="cl1">1</span><br />
生日：<input type="text" id="text2"/><span id="cl2">1</span><br />
<input type="button" id="but1" value="添加" />
<input type="button" id="but2" value="全部删除"/>
<br />
<table border="1" cellspacing="0">
<tr>
<th>姓名</th>
<th>生日</th>
<th>添加日期</th>
<th>操作</th>
</tr>
<tr>
<td>小明</td>
<td>2017-04-15</td>
<td></td>
<td>delete</td>
</tr>
<tbody id="tbody1">
</tbody>
</table>
</body>
<script type="text/javascript">
var but1=document.getElementById("but1");
but1.onclick=function(){
var tbody1=document.getElementById("tbody1");
var text1=document.getElementById("text1").value;
var text2=document.getElementById("text2").value;
var font1=document.getElementById("cl1");
var font2=document.getElementById("cl2");
if(text1==""){
font1.innerHTML="姓名能为空";
}
if(text2==""){
font2.innerHTML="生日不能为空";
}
if(text1==""||text2==""){
return;
}
var tr1=document.createElement("tr");
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
var td4=document.createElement("td");
// td1
td1.innerHTML=text1;
//TD2
td2.innerHTML=text2;
//td3
var tate1=new Date();
tate1=tate1.toLocaleString();
td3.innerHTML=tate1;
//td4
var input1=document.createElement("input");
input1.setAttribute("type","button");
input1.setAttribute("value","delete");
input1.setAttribute("name","det1");
input1.onclick=function(){
tbody1.removeChild(this.parentNode.parentNode);
}
td4.appendChild(input1);
tr1.appendChild(td1);
tr1.appendChild(td2);
tr1.appendChild(td3);
tr1.appendChild(td4);
tbody1.appendChild(tr1);
//var s=tbody1.children;
var but2=document.getElementById("but2");
but2.onclick=function(){
for(i=0;i<tr1.length;i++){j
tbody1.removeChild(tr1[i]);
i--;
}
}
var a=text2.substring(5,7);
console.log(a);
a=Number(a);
if(a>=2&&a<=5){
tr1.style.backgroundColor="blue";
}
}
</script>
</html>
网友评论