做个简单的提交表单生成表格
<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">
</body>
首先我们要构思案例的思路,有条理的书写会让我们避免出现更多的bug;
- 当点击添加按钮是,获取表单的数据,并且存入arr;
- 根据数组创建表格;
- 根据search文本的内容在数组中模糊查找数据,查找的的数据存入新的数组中,并且通过这个数组创建表格;
- 清除新数组创建的表格,重新根据原数组创建表格;
<script>
var arr=[];
var button=[];
var table=$("<table></table>").css("borderCollapse","collapse").width(800).appendTo("bady");
$("#bn").on("click",function(e){
var obj={};
var bool=false;
$(":text:not(#search)").each(function(index,item){
var str=$(item).attr("name");
if($(item).val().trim().length===0){
bool=true;
}
obj[str]=$(item).val();
});
if(bool){
alert("输入的内容有误!");
return;
}
obj.deleted=false;
arr.push(obj);
createTable(arr);
});
$("#clear").on("click",function(){
buDispose();
table.empty();
arr=[];
})
function bnDispose(){
for (var i=0;i<buttons.length;i++;){
button[i].off("click");
button[i]=null;
}
buttons.length=0;
};
function createTable(arr){
bnDispose();
table.empty();
if(!arr || arr.length===0) return;
var style={
height="30px",
lineheight="30px",
textalign="center",
border="1px solid #000"
};
var thr=$("<tr></tr>").appendTo(table);
$.each(arr[0],function(prop,value){
$("<th></th>").text(prop).appendTo(thr).css(style);
});
$.each(item,function(prop,value){
var td=$("<td></td>").css(style).appendTo(td).on("click",function(e){
if(prop==="deleted"){
var bn=$("<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);
});
buttons.push(bn);
}else{
td.text(value);
};
})
});
}
</script>
看人这么少,我就先不写注释了;
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
