简单excel分组表格实现
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
table{
table-layout:fixed;
}
td,td{
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>
<form>
<label>查询条件:</label><input type="text"/>
<button value="查询">查询</button>
</form>
</div>
<div id="table1"></div>
</body>
</html>
<script>
var sortCol = [0];
var columnModel = [{"DATA_INDEX":"APP_ID","HEADER":"申请单号"},{"DATA_INDEX":"ORDER_ID","HEADER":"工单号"},{"DATA_INDEX":"ORDER_NAME","HEADER":"工单名"}];
var table = $("<table border=1 cellpadding=0 cellspacing=0><tr><th>申请单号</th><th>工单号</th><th>工单名</th></tr></table>");
$("#table1").append(table);
var json = [{"APP_ID":1,"CONTENT":[{"ORDER_ID":76543211234567,"ORDER_NAME":'测试1'},{"ORDER_ID":76543211234568,"ORDER_NAME":'测试2'}]},
{"APP_ID":2,"CONTENT":[{"ORDER_ID":76543211234568,"ORDER_NAME":'测试3'},{"ORDER_ID":76543211234569,"ORDER_NAME":'测试4'}]}];
window.onload = function(){
for(key in json){
var app = json[key];
var tr = $("<tr><td>"+app.APP_ID+"</td></tr>");
var contents = app.CONTENT;
var td = $("<td colspan='"+contents.length+"'></td>");
var table1 = $("<table border=1 cellpadding=0 cellspacing=0 frame=void rules=rows></table>");
for(con in contents){
var content = contents[con];
var tr1 = $("<tr></tr>").click(function(){
check(this);
});
for(col in columnModel){
if(in_array(sortCol,col))continue;
var attrName = columnModel[col].DATA_INDEX;
var attrValue = content[attrName];
var td1 = $("<td>"+attrValue+"</td>");
$(tr1).append(td1).attr(attrName,attrValue);
}
$(table1).append(tr1);
}
$(td).append(table1);
$(tr).append(td);
$("#table1 table:first").append(tr);
}
}
function in_array(array,col){
for(var i in array){
if(array[i]==col){
return true;
}
}
return false;
}
function check(obj){
var This = $(obj);
var orderId = This.attr('order_id');
}
</script> 相关推荐
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
玫瑰小妖 2020-06-07
lyg0 2020-05-28
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
swiftwwj 2020-07-05
pythonclass 2020-06-25
nercon 2020-06-14
pythonclass 2020-06-03
huzijia 2020-05-08
行吟阁 2020-05-11
黎豆子 2020-05-11
玫瑰小妖 2020-05-11
HSdiana 2020-05-10
黎豆子 2020-05-08