js_表格的增删改

学到后面发现前面的内容都不是很巩固了。

知道自己的不足之后，最近在复习一些学过的知识。

用js做了一个还不是完美表格增删改。（只适合列数比较少的表格）

 

贴上代码：

html:

<div class="goods_info">
        <table class="goods_ctg">
            <caption class="ctg_caption">
                商品类别信息
            </caption>
            <thead>
                <tr>
                    <th>类别编号</th>
                    <th>类别名称</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>食品</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>日用品</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>家用电器</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>服饰</td>
                </tr>
            </tbody>
        </table>

        <div class="hidden_box" id="hidden_text">
            <label for="input_info" id="tips">商品名称：</label>
            <input type="text" name="input_info" id="input_info" class="input_info">
            <input type="button" name="ok_btn" id="ok_btn" class="ok_btn" value="确&nbsp;认">
        </div>
        <div class="clearfix"></div>

        <input type="button" name="modify_goods" id="modify" class="btn" value="修&nbsp;改">
        <input type="button" name="del_goods" id="del" class="btn" value="删&nbsp;除">
        <input type="button" name="add_goods" id="add" class="btn" value="添&nbsp;加">

        <div class="clearfix"></div>    
    </div>

css:

<style>
*{
    padding: 0;
    margin:0;
}
.goods_info{
    width:800px;
    margin:100px auto;
    border:2px solid pink;
}
.goods_ctg{
    border:1px solid black;
    border-collapse: collapse;
    margin:50px auto;
}
.goods_ctg th{
    padding:10px;
    border:1px solid black;
}
.goods_ctg td{
    padding: 10px;
    border:1px solid black;
}
.ctg_caption{
    font-size:25px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #EE6363;
}
.btn{
    float: right;
    width: 120px;
    height:30px;
    font-size:20px;
    font-weight: bold;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0;
    outline: none;
    background: #4caf50;
    color: #fff;
    opacity: 0.8;
}
.btn:hover{
    opacity: 1;
}
.hidden_box{
    float:right;
    margin:0 50px 40px 10px;
    display: none;
}
.hidden_box label{
    font-size:19px;
    font-weight: bold;
    color: #3d8b40;
}
.input_info{
    height:20px;
    width: 160px;
    font-size:17px;
    border-radius: 5px;
    box-shadow: none;
    background: #F8F8FF;
    outline: none;
    opacity: 0.6;
}
.ok_btn{
    width: 90px;
    height:30px;
    font-size:18px;
    font-weight: bold;
    border-radius: 10px;
    border: 0;
    outline: none;
    background: #A2CD5A;
    color: #fff;
    opacity: 0.85;
}
.ok_btn:hover{
    opacity: 1;
}
.clearfix{
    clear: both;
}

</style>

js:

<script>
window.onload=function(){
    
    changeColor();

    /*添加*/
    var add = document.getElementById("add");
    add.onclick=function(){

        //显示隐藏块
        var hidden_text =document.getElementById("hidden_text");
        var txt = document.getElementById("input_info");
        hidden_text.style.display="block";

        //对隐藏块的修改
        var ok_btn = document.getElementById("ok_btn");
        ok_btn.value="新增"
        var tips = document.getElementById("tips");
        tips.innerHTML = "商品名称:";

        ok_btn.onclick = function(){

            //获取最后一行的商品编号
            var pre_tr = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
            var pre_len = pre_tr.length;
            var last_no = pre_len; //parseInt(pre_tr[pre_len-1].getElementsByTagName("td")[0].innerHTML);

            var flag=0;
            for(var j=0;j<pre_len;j++){
                if(pre_tr[j].getElementsByTagName("td")[1].innerHTML == txt.value){
                    flag = 1;
                }
            }

            if(txt.value == ""){
                alert("请输入商品名称！")
                return;
            }
            else if(flag==1){
                alert("输入的商品名称已存在！")
            }
            else{

                //创建节点
                var goods_tr = document.createElement("tr");
                var tdByNo = document.createElement("td");
                var tdByName = document.createElement("td");

                var goods_tbody = document.getElementsByTagName("tbody")[0]

                tdByNo.innerHTML = last_no+1;
                tdByName.innerHTML = txt.value;

                goods_tr.appendChild(tdByNo);
                goods_tr.appendChild(tdByName);
                goods_tbody.appendChild(goods_tr);

                hidden_text.style.display="none";
                changeColor();

                alert("添加成功！");

            }
            
        }
    }


    /*删除*/
    var del = document.getElementById("del");
    del.onclick=function(){

        //显示隐藏块
        var hidden_text =document.getElementById("hidden_text");
        var txt = document.getElementById("input_info");
        hidden_text.style.display="block";

        //对隐藏块的修改
        var ok_btn = document.getElementById("ok_btn");
        ok_btn.value="删除"
        var tips = document.getElementById("tips");
        tips.innerHTML = "商品编号:";

        
        ok_btn.onclick=function(){
            //是否为空
            if(txt.value==""){
                alert("商品编号不能为空！")
            }
            //检验是否为整数
            else if(parseInt(txt.value)!=txt.value){
                alert("请输入整数！")
            }
            else{
                //检验是否存在该商品编号
                var pre_tr = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
                var pre_len = pre_tr.length;
                var flag = 0;
                for(var j=1;j<=pre_len;j++){
                    if(j == parseInt(txt.value)){
                        flag=1;
                    }
                }

                if(flag == 0){
                    alert("不存在此商品编号！")
                }
                else{
                    var goods_tbody = document.getElementsByTagName("tbody")[0];
                    goods_tbody.removeChild(pre_tr[txt.value-1]);
                    changeNo();
                    changeColor();
                    hidden_text.style.display="none";
                    alert("删除成功");
                }
            }
        }

    }


    /*修改商品名称*/
    var modify = document.getElementById("modify");
    modify.onclick=function(){

        //显示隐藏块
        var hidden_text =document.getElementById("hidden_text");
        var txt = document.getElementById("input_info");
        hidden_text.style.display="block";

        //对隐藏块的修改
        var ok_btn = document.getElementById("ok_btn");
        ok_btn.value="进行修改"
        var tips = document.getElementById("tips");
        tips.innerHTML = "商品编号:";

        ok_btn.onclick=function(){
            //是否为空
            if(txt.value==""){
                alert("商品编号不能为空！")
            }
            //检验是否为整数
            else if(parseInt(txt.value)!=txt.value){
                alert("请输入整数！")
            }
            else{
                //检验是否存在该商品编号
                var pre_tr = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
                var pre_len = pre_tr.length;
                var flag = 0;
                var place;
                for(var j=1;j<=pre_len;j++){
                    if(j == parseInt(txt.value)){
                        flag=1;
                        place = j;
                    }
                }

                if(flag == 0){
                    alert("不存在此商品编号！")
                }
                else{
                    
                    //对隐藏块的修改
                    var ok_btn = document.getElementById("ok_btn");
                    ok_btn.value="修改"
                    var tips = document.getElementById("tips");
                    tips.innerHTML = "商品名称:";

                    txt.value = pre_tr[place-1].getElementsByTagName("td")[1].innerHTML;

                    ok_btn.onclick=function(){

                        var f=0;
                        for(var j=0;j<pre_len;j++){
                            if(pre_tr[j].getElementsByTagName("td")[1].innerHTML == txt.value){
                                f = 1;
                            }
                        }

                        if(txt.value == ""){
                            alert("请输入商品名称！")
                            return;
                        }
                        else if(f==1){
                            alert("输入的商品名称已存在！")
                        }
                        else{
                            pre_tr[place-1].getElementsByTagName("td")[1].innerHTML = txt.value;
                            hidden_text.style.display="none";
                            alert("修改成功！");
                        }



                    }

                }
            }

        }

    }
    
}


/*背景色的改变*/
function changeColor(){
    var tr = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    var len = tr.length;
    var i;
    for(i=1;i<=len;i++){
        if(i%2 == 0){
            tr[i-1].style.background="#f1f1f1";
        }
        else{
            tr[i-1].style.background ="#fff"
        }
    }
}

/*序号重排*/
function changeNo(){
    var trs = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    var len = trs.length;
    for(var j=1;j<=len;j++){
        trs[j-1].getElementsByTagName("td")[0].innerHTML = j;
    }
}

</script>

 

效果展示：

 

商品类别信息
类别编号类别名称
1 食品
2 日用品
3 家用电器
4 服饰
 
 

 

以上内容，如有错误请指出，不甚感激。

 

posted @ 2016-08-09 14:27  FIONA-SUN  阅读(884)  评论(0)  编辑  收藏  举报