table 信息的添加

<!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>

table 信息的添加

推荐阅读更多精彩内容