增删改查

html网页结构图

    
    




    

  


    

        
添加商品
        
ID:品牌名称:添加
        

            

                
Id
                
品牌名称
                
操作(Operation)
            
            

                
1
                
奔驰
                
删除
            
            

                
2
                
宝马
                
删除
            
        
    

css样式

    *{
margin:0 ;
padding:0;
}
.b{
width: 100%;
height: 500px;
margin-top: 200px;
background-color: red;
    }
    .b1{
width: 800px;
height: 500px;
margin:0 auto;
background-color: white;
border:2px solid black;
}
.b2{
width: 800px;
height: 100px;
background-color:skyblue;
border-radius: 12px;
}
.b2 span{
color:white;
font-weight: bold;
font-size: 50px;
line-height: 100px;
margin-left: 291px;
}
.b3{
width: 800px;
height: 100px;
border-bottom: 2px solid skyblue;
}
.b3 span{
    margin-top: 40px;
    }
.b3 input{
margin-top: 40px;
height: 30px;
width: 300px;
}
.b3 button{
margin-left: 10px;
height: 35px;
width: 40px;
border-radius: 5px;
border:1px solid skyblue;
background-color: skyblue;
}
.b3 button:active{
background-color: red;
color:white;
}
.b4{
width: 800px;
height: 280px;
background-color: white;
margin-top: 20px;
}
.a{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
width: 800px;
height: 40px;
background-color:white;
}
.c{
width: 100px;
height: 40px;
float:left;
}
.c1{
width: 200px;
height: 40px;
float: left;
border-left: 1px solid #999;
  }
.c2{
    width: 498px;
height: 40px;
float: right;
border-left: 1px solid #999;
  }
.c,.c1,.c2 span{
  line-height: 40px;
}
.a1{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
width: 800px;
height: 40px;
background-color:white;
}
.d{
width: 100px;
height: 40px;
float:left;
}
.d1{
width: 200px;
height: 40px;
float: left;
border-left: 1px solid #999;
}
.d2{
width: 498px;
height: 40px;
float: right;
border-left: 1px solid #999;
}
.d,.d1 span{
line-height: 40px;
}
.d2 a{
text-decoration: none;
color:skyblue;
line-height: 40px;
}
.a2{
border-top: 1px solid #999;
border-bottom: 1px solid #999;
width: 800px;
height: 40px;
background-color:white;
}
.e{
    width: 100px;
height: 40px;
float:left;
}
.e1{
width: 200px;
height: 40px;
float: left;
border-left: 1px solid #999;
  }
.e2{
width: 498px;
height: 40px;
float: right;
border-left: 1px solid #999;
    }
.e,.e1 span{
line-height: 40px;
  }
.e2 a{
text-decoration: none;
color: skyblue;
line-height: 40px;
}

JS

$(function(){
$('#btn1').click(function() {
    var txt = $('#txt').val();
    var txt1 = $('#txt1').val();
    $('#txt1').val('');
    var $li =$('
' + txt + '
' + txt1 + '
删除
')
    if (txt== ''|| txt1 == '') {
        alert('请输入内容');
        return;
    }
    $li.appendTo('#list');
});

$('.del').click(function() {
    $(this).parent().remove();
});

})