添加删除表格（jquery）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
编号：<input type="text" name="bookNo"><br>
书名：<input type="text" name="bookName"><br>
作者：<input type="text"  name="author"><br>
出版社：<input type="text"  name="press"><br>
<input type="button" value="添加" id="bn">

查找：<input type="text" id="search">
<input type="button" value="查找" id="searchBn">
<input type="button" value="清除" id="clear">
<script>
    /*
    *  1、当点击按钮时，创建新对象，将对象放在数组中
    *  2、删除表格，根据数组创建表格
    * */
    var arr=[];
    $("#bn").on("click",function (e) {
        var obj={};
        $(":text:not(#search)").each(function (index,item) {
            var str=$(item).attr("name");
            obj[str]=$(item).val();
        });
        obj.deleted=false;
        arr.push(obj);
        createTable(arr);
    });

    $("#searchBn").on("click",function (e) {
        var str=$("#search").val();
        var list=[];
        $.each(arr,function (index,item) {
            if(item.bookName.indexOf(str)>-1){
                list.push(item);
            }
        });
        createTable(list);
    });
    $("#clear").on("click",function (e) {
        createTable(arr);
        $("#search").val("");
    });

    function createTable(dataArr) {
        var table=$("table");
        if(table){
            table.remove();
        }
        var style={
            height:"30px",
            lineHeight:"30px",
            textAlign:"center",
            border:"1px solid #000000"
        };
        if(dataArr.length===0)return;
        table=$("<table></table>").css("borderCollapse","collapse").width(800).appendTo("body");
        var trh=$("<tr></tr>").appendTo(table);
        $.each(dataArr[0],function (prop) {
            $("<th></th>").text(prop).css(style).appendTo(trh);
        });
        $.each(dataArr,function (index,item) {
            var tr=$("<tr></tr>").appendTo(table);
            $.each(item,function (prop,value) {
                var td= $("<td></td>").css(style).appendTo(tr);
                if(prop==="deleted"){
                    $("<button>删除</button>").appendTo(td).one("click",function (e) {
                        var list=Array.from($("tr"));
                        var index=list.indexOf($(this).parent().parent()[0]);
                        dataArr.splice(index-1,1);
                        createTable(dataArr);
                    })
                }else{
                    td.text(value);
                }
            })
        })
    }
</script>
</body>
</html>
结果截图：
添加删除表格（jquery）

猜你喜欢
