比较常用的JS搭配Bootstrap生成生成表格～
1.定义一个表格
emm...引入css、js这些基本的就忽略了
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover " id="my_table">
<!-- 表头 -->
<thead>
<tr>
<th>送评单号</th>
<th>网名</th>
<th>真实姓名</th>
<th>项目数量</th>
<th>总费用</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<!-- tbody 表内容,使用js填充 -->
<tbody>
</tbody>
</table>
</div>
</div>
</div>
2.编写JS
$(function(){
/**
* 发送ajax
*/
$.ajax({
url: "../yinin/list",
data:{"nummber":1996},
dataType: "json",
type:"post",
success: function (data){
if(data.code==500){
alert("没有信息")
return;
}
//填充表格
build_table(data);
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败！");
}
});
});//function end
//解析显示表格信息 ↑
function build_table(result){
//清空表格
$("#my_table tbody").empty();
//1).接收所有数据
var list=result.list;
//2).使用JS函数进行遍历,index:索引,item:对象
$.each(list,function(index,item){
//3).将每一条数据以 <tr>节点填充到表格中显示,
// 首先得把每一个元素接收再append到父元素 <tr>中
var sendnum=$("<td style='color: #CD950C;'></td>").append(item.sendnum);
var nickname=$("<td style='color: #CD950C;'></td>").append(item.nickname);
var rname=$("<td style='color: #CD950C;'></td>").append(item.rname);
var coinCount=$("<td></td>").append(item.coinCount+"个");
var sumfeetw=$("<td></td>").append("￥"+item.sumfeetw+"元");
var inupttime=$("<td></td>").append(getMyDate(item.inupttime));
var btn_edit=$("<button @click='update'></button>").addClass("btn btn-primary btn-sm edit_btn index")//给修改按钮添加 Class标识,
.append($("<span><span>").addClass("glyphicon glyphicon-pencil")).append(" 修改");
//为编辑按钮添加一个自定义属性，设置值为表示当前员工ID ***
btn_edit.attr("edit-id",item.id);
//4).将两个按钮拼到一个<td>里 ↓
var btn=$("<td></td>").append(btn_edit);
//5).把所有的<td>m节点append到 <tr>中,最后把<tr>节点appendTo到指定的位置
$("<tr></tr>").append(sendnum).append(nickname).append(rname).append(coinCount).append(sumfeetw).append(inupttime).append(btn)
.appendTo("#scan_table tbody");
});
}
3.效果展示
具体实现效果根据业务去延伸！
