静态网页：通讯录增删隔行变色重新编号

效果： 交流群：970353786 布局代码：

	
		
		
        
            #box{
                width: 500px;
                /* border: 1px solid black; */
                margin: 0px auto;
            }
            table{
                width: 100%;
            }
            caption{
                font-size: 40px;
            }
            table tr{
                height: 40px;
                font-size: 20px;
            }
            tbody td{
                text-align: center;
            }
            #box>button{
                width: 100%;
                margin-top: 20px;
                height: 50px;
                background-color: aquamarine;
                border-radius: 25px;
                border: none;
                font-size: 20px;
            }
            
        
	
	
        
            
                通讯录
                
                    编号姓名
                    电话操作
                
                
                    1张三18866668888删除
                    2李四18812345678删除
                
                
            
            添加新行
        
	

删除功能代码：

	
		
		
        
            #box{
                width: 500px;
                /* border: 1px solid black; */
                margin: 0px auto;
            }
            table{
                width: 100%;
            }
            caption{
                font-size: 40px;
            }
            table tr{
                height: 40px;
                font-size: 20px;
            }
            tbody td{
                text-align: center;
            }
            #box>button{
                width: 100%;
                margin-top: 20px;
                height: 50px;
                background-color: aquamarine;
                border-radius: 25px;
                border: none;
                font-size: 20px;
            }
            
        
	
	
        
            
                通讯录
                
                    编号姓名
                    电话操作
                
                
                    1张三18866668888删除
                    2李四18812345678删除
                
                
            
            添加新行
        
	
    
        //01-静态布局
        var table = document.getElementById("mytable")
        var addNewLineBtn = document.getElementById("addNewLineBtn")
        
        //02-添加新行
        addNewLineBtn.onclick = function(){
            var tr = document.createElement("tr");
            table.tBodies[0].appendChild(tr);
            var rowCount = table.tBodies[0].rows.length;
            console.log(rowCount);
            
            for (var i = 0;i button{
                width: 100%;
                margin-top: 20px;
                height: 50px;
                background-color: aquamarine;
                border-radius: 25px;
                border: none;
                font-size: 20px;
            }
            
        
	
	
        
            
                通讯录
                
                    编号姓名
                    电话操作
                
                
                    1张三18866668888删除
                    2李四18812345678删除
                
                
            
            添加新行
        
	
    
        //01-静态布局
        var table = document.getElementById("mytable")
        var addNewLineBtn = document.getElementById("addNewLineBtn")
        
        //02-添加新行
        addNewLineBtn.onclick = function(){
            var tr = document.createElement("tr");
            table.tBodies[0].appendChild(tr);
            var rowCount = table.tBodies[0].rows.length;
            console.log(rowCount);
            
            for (var i = 0;i