jq动态表单

编号：

书名：

作者：

出版社：

查找：

/*
*
* 1、当点击添加按钮时，获取表单的数据，并且存入arr
* 2、根据数组创建表格
* 3、根据search文本的内容在数组中模糊查找数据，查找到的数据存入新数组，
*   并且通过这个新数组创建表格
*  4、清除新数组创建的表格，重新根据原数组创建表格
*
* */
var arr=[];
var table=$("<table></table>").css("borderCollapse","collapse").width(300).appendTo("body");


$("#bn").on("click",function (e) {
    var obj={};
    var bool=false;
     $(":text:not(#search)").each(function(index,item){       //input遍历,item 就是input 里面的每一项
   var str=$(item).attr("name");//input   attr可以返回，获取属性.
   if($(item).val().trim().length===0){
       bool=true;
   }
   obj[str]=$(item).val();//val()获取输入的内容

    });
     if(bool){
         alert("错误");
         return;
     }
     obj.delete=false;
     arr.push(obj);
    createTable(arr)
});
$("#searchBn").on("click",function (e) {
    var list=[];
    $.each(arr,function (index,item) {
         if(item.bookName.indexOf($("#search").val())>-1){
             list.push(item);
         }
    });
    createTable(list)
});
$("#clear").on("click",function (e) {
    table.empty();
    arr=[];
});
function createTable(arr) {
       table.empty();
       if( !arr||arr.length===0)return;
       var style={
         height:"30px",
           width:"30px",
           lineHeight:"30px",
           textAlign:"center",
           border:"1px solid #000000"
       };
       var thr=$("<tr></tr>").appendTo(table);
     $.each(arr[0],function (prop,value) {
         $("<th></th>").text(prop).appendTo(thr).css(style);
     });
    $.each(arr,function (index,item) {
        var tr=$("<tr></tr>").appendTo(table);
        $.each(item,function (prop,value) {
           var td= $("<td></td>").css(style).appendTo(tr);
           if(prop==="delete"){
             $("<button>删除</button>").appendTo(td).on("click",function (e) {
                var tr=$("this").parent().parent()[0];
                 var trs=Array.from($("tr"));
                 var index=trs.indexOf(tr);
                 arr.splice(index-1,1);
                 createTable(arr)
             });
           }else {
               td.text(value)
           }
        })
    })
}