列表增删

    
    
    
    
    



    

        
添加品牌
        
ID:
            
            品牌名称：
            
            
        
    
    

        

            
ID品牌名称操作（Operation）        

            
1宝马删除

        
    

js

    $(function () {
        $('#btn1').click(function () {
            var txt01 = $('#txt1').val();
            var txt02 = $('#txt2').val();
            var $li = $('
' + txt01 + '' + txt02 + '删除
');
            $li.appendTo('#list');
        });
        $('#list').delegate('a', 'click', function () {
            var handler = $(this).attr('class');
            switch (handler) {
                case 'del':
                    var txt = $(this).parent().children(':first').html();
                    if (confirm('你确定要删除"' + txt + '"吗？')) {
                        $(this).parent().remove();
                    }
                    break;
            }
        });
    });

css

*{
        margin: 0;
        padding: 0;
    }

    .box{
        width: 800px;
        height: 100px;
        margin: 200px auto;
        border: 1px blue solid;
        border-radius: 10px;
    }
    .box1{
        width: 800px;
        height: 30px;
        background-color: blue;
        border-radius: 3px;
    }
    .h1{
        width: 100px;
        height: 15px;
        font-size: 16px;
        margin-left: 20px;
        color: white;
        padding-top: 5px;
    }
    .ld{
        font-size: 18px;
        margin: 0 auto;
        padding-top: 30px;
    }
    .inputbtn{
                width:40px;
                height:32px;
                padding:0px;
                border:1px solid #ccc;
    }
    .inputtxt, .inputtxt2{
        width:250px;
        height:30px;
        border:1px solid #ccc;
        padding:0px;
        text-indent:10px;
    }

    .list{
        margin:0;
        padding:0;
        list-style:none;
        margin-top:20px;
    }

    .list li{
        height:30px;
        line-height:30px;
        border-bottom:1px solid #ccc;
    }

    .list li span{
        float:left;
        width: 267px;
        border: 1px #8c8c8c solid;
        border-bottom: none;
    }

    .list li a{
        float:right;
        text-decoration:none;
        margin:0 10px;
    }

    .box2{
        width: 807px;
        margin-top: 100px;
    }