<caption>文章列表</caption>
<thead>
<tr>
<th>
<input type="checkbox" id="checkAll">
</th>
<th>ID</th>
<th>标题</th>
<th>录入者</th>
<th data-OrderBy="UpdateTime">录入时间</th>
<th style="text-align:center">操作</td>
</tr>
</thead>
<tbody id="view"></tbody>
</table>
<div id="pagebox"></div>
<script id="demo" type="text/html">
{{# layui.each(d.articlelist, function(index, item){ }}
<tr data-channelid="{{ item.ChannelID }}">
<td>
<input type="checkbox" name="checkchild" class="checkchild" value="{{ item.ID }}">
</td>
<td>{{ item.ID }}</td>
<td>
{{ item.Title }}
</td>
<td>{{ item.Inputer }}</td>
<td>{{ item.UpdateTime }}</td>
<td class="doAction">
<button class="layui-btn layui-btn-mini layui-btn-normal" data-id="edit"><i class="layui-icon"></i>修改</button>
</td>
</tr>
{{# })}}
{{# if(!d.articlelist || d.articlelist.length == 0){ }}
<tr class="noArticle"><td colspan="6">{{ d.msg||"没找到相关记录" }}</td></tr>
{{# } }}
</script>
下面是js代码
function demo(curr){
$.getJSON('data.json', {"page":curr||1},function(data){
//显示分页
laypage({
cont: 'pagebox' //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
,pages: data.pages //通过后台拿到的总页数
,curr: curr || 1 //当前页
,jump: function(obj, first){ //触发分页后的回调
if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
demo(obj.curr)
}
}
})
var getTpl = $("#demo").html()
laytpl(getTpl).render(data, function(html){
$("#view").html(html)
})
})
}
1、需要写界面的时候需要实现——通过点击一个button让table增加一行（和前面行内的内容一致，无论是dropdown还是checkbox）。
2、步骤是这样的：
在script里面写一个Function如下。
直接通过<input type="button" value="More" name="More" class="sb" style="width:40px" onclick="addRow()" />调用它的onclick事件，onclick="addRow()"即可以实现需求。
以下是纯js+html实现的增删改操作代码，你可以参考以下。当然也可以使用jquery之类的框架来实现，最终的原理都是一样的。<html> <head> <title>增删改查</title> <style type=""> tr{ text-align:center }</style> <script type="text/javascript"> //通过新增按钮来控制表格的显示与隐藏 var optionFlag = "save" var updateRowIndex = -1 var checkFlag=false//默认为不显示 function show() { optionFlag = "save"var f = document.getElementById("did")//获得id为did的 div if(!checkFlag) { f.style.visibility="visible" }else{ f.style.visibility="hidden" } checkFlag=!checkFlag } //通过保存按钮将数据添加到表格中 function insertRow_() { switch(optionFlag) {case "save" : insertRow_$save() break case "update" : insertRow_$update() break default : alert("操作失败。。。") } function insertRow_$save() {//通过id获得要添加数据的表格 var table = document.getElementById("tableid") //将所输入的内容赋给定义的变量 var titleName = document.getElementById("title").value var digestName = document.getElementById("digest").value var authorName = document.getElementById("author").value
