根据后台数据动态生成表格

来源：互联网发布：手机定位软件哪个好编辑：程序博客网时间：2024/05/21 19:14

这是一个html页面，红框内内容是Json数据动态生成的，

以下：

json数据：

{"ZHAOPIN": [{"TYPE": "医生","EDUCATION": "本科","AGE_BEGIN": "30","AGE_END": "50"},{"TYPE": "老师","EDUCATION": "专科","AGE_BEGIN": "20","AGE_END": "30"}]}

html代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>input,tr,td,table,span,e {margin: 0;}e {color: red;}table {border-collapse: collapse;}td {text-align: center;border: 1px solid #ddd;}input[type="text"] {font-size: 14px;width: 97%;height: 100%;border: none;text-align: center;}textarea {font-size: 14px;width: 97%;height: 100%;outline: none;border: none;}.addbtn,.removebtn {background: url(edit_add.png) no-repeat 10% center;vertical-align: top;display: inline-block;padding: 4px 12px 4px 30px;height: 20px;}table tr td:first-child {text-align: left;padding-left: 10px;width: 100px;}table tr.zptype td:first-child {text-align: center;}.removebtn {background: url(edit_remove.png) no-repeat 10% center;}</style></head><body><table><tr><td><e>*</e>招聘标题:</td><td colspan="3"><input type="text" /></td></tr><tr><td><e>*</e>招聘职位:</td><td colspan="3"><input type="text" /></td></tr><tr><td><e>*</e>内容:</td><td colspan="3"><textarea name="" rows="" cols=""></textarea></td></tr><tr><td colspan="4"><a href="javascript:;" class="addbtn" id="addbtn"></a><a href="javascript:;" class="removebtn" id="removebtn"></a></td></tr><tr class="zptype"><td>招聘类型</td><td>学历要求</td><td>起年龄要求</td><td>至年龄要求</td></tr><tr class="choosetr"><td>是否公开</td><td colspan="3" style="text-align: left;padding-left: 20px;"><input type="radio" name="choose" />是<input type="radio" name="choose" />否</td></tr><tr><td><e>*</e>发布人</td><td><input type="text" /></td><td><e>*</e>资料来源:</td><td><input type="text" /></td></tr><tr><td><e>*</e>发布日期:</td><td><input type="text" /></td><td><e>*</e>截止日期:</td><td><input type="text" /></td></tr></table><script src="jquery-1.8.2.min.js"></script><script>$(function() {$.ajax({type: "get",url: "input.json",success: function(inputdata) {var zptada = inputdata.ZHAOPIN;for(var i = 0; i < zptada.length; i++) {var _div = zphtml(zptada[i].TYPE, zptada[i].EDUCATION, zptada[i].AGE_BEGIN, zptada[i].AGE_END)$(".choosetr").before(_div);}},error: function(inputdata) {}});});$(document).on('click', '#addbtn', function() {var clonediv = $(".choosetr");clonediv.before(zphtml("", "", "", ""));});$(document).on('click', '#removebtn', function() {var removediv = $(".choosetr");removediv.prev().remove();});function zphtml(type, education, agebegin, ageend) {var _div = '<tr>' +'<td>' +'<input type="text" value="' + type + '" />' +'</td>' +'<td>' +'<input type="text" value="' + education + '" />' +'</td>' +'<td>' +'<input type="text" value="' + agebegin + '" />' +'</td>' +'<td>' +'<input type="text" value="' + ageend + '" />' +'</td>' +'<tr>'return _div;}</script></body></html>

坑:删除按钮要点两次才能删除一行数据，未解决

阅读全文

1 0