制作表格的一些笔记
来源:互联网 发布:苹果桌面主题软件 编辑:程序博客网 时间:2024/05/22 08:26
作为写java的菜鸟,前几天接到了一个写表格的任务,虽然学过js,但是很长时间没有用了,再次去操作的js代码时候各种蒙B,今天做的差不多了,赶紧记下来过程,以便以后翻阅,直接上代码。
这样的一个表格需求,这里的难度在于如何去动态的合并单元格。
数据以json的形式传给前端
先说一下我的整体思路:将后台的数据先一行一行的显示出来,在遍历整个表格找出同一个人的数据有多少条(count)、从哪一行开始的(start),通过这两个条件按照图去慢慢写合并的操作,代码中for循环的条件和角标的控制可以通过前端js调试工具慢慢调试。
1.先按照车牌号去将所有的数据分组,这里我有借鉴网上其他大神的动态合并单元格的js,mergeCells是提取出来的合并操作,参数start从第几行开始,count有几行数据。
he(start,count)方法是插入小计行的方法
var count=1;
var start;
var col="";
var tab = document.getElementById("tab");
for (var i = 1; i < tab.rows.length; i++) {
if (col == tab.rows[i].cells[1].innerHTML) {
count++;
} else {
if (count > 1) { //合并
start = i - count;
mergeCells(start, count);
he(start + count, count);
count = 1;
}
col = tab.rows[i].cells[1].innerHTML;
}
}
//如果是最后几行是同一人数据
if (count > 1) {
start = tab.rows.length - count;
mergeCells(start, count);
he(start+count,count);
}
2.合并方法:分为车牌号,驾驶员,所属项目,车辆类型。四列的合并和日期的合并。delDateCells(start,count)是删除日期多余单元格的方法,最后几条数据的合并参数会有所不同。
function mergeCells(start,count){
var con=1;
var col = "";
var del;//从第几行开始删除多余的单元格
var tab = document.getElementById("tab");
//合并车辆基本信息
tab.rows[start].cells[1].rowSpan = tab.rows[start].cells[2].rowSpan = tab.rows[start].cells[3].rowSpan = tab.rows[start].cells[4].rowSpan = count;
//合并日期
for (var i = 0; i < count; i++) {
if(col == tab.rows[start+i].cells[6].innerHTML){
con++;
}else{
if(con>1){//合并
tab.rows[start+i - con].cells[6].rowSpan = con;
delDateCells(start+i - con + 1, con - 1);
}
col = tab.rows[start+i].cells[6].innerHTML;
con = 1;
}
}
if(con>1){//如果是最后几行合并
tab.rows[start+count-con].cells[6].rowSpan = con;
del = start + count - con + 1;
delDateCells(del, con - 1);
}
//删除前四列多余单元格
for (var j = 0; j < count-1; j++) {
tab.rows[start+1 + j].cells[1].style.display = "none";
tab.rows[start+1 + j].cells[2].style.display = "none";
tab.rows[start+1 + j].cells[3].style.display = "none";
tab.rows[start+1 + j].cells[4].style.display = "none";
}
}
3.小计行的插入,小计我选择将数据合并完了之后再去找到相应的位置去插入小计这一行,小计行中的一些数据,需要另外写方法去计算,有start和count两个参数是可以计算出来的,这里考虑可能会有更好的方法就先不写出来。
/*
计算小计
*/
function he (start,count) {
var tab = document.getElementById("tab");
var row = tab.insertRow(start);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
var cell6 = row.insertCell(6);
cell0.innerHTML = 1;
cell1.innerHTML = "小计";
cell1.colSpan = 5;
}
- 制作表格的一些笔记
- HTML学习笔记--制作表格
- HTML学习笔记-制作表格
- CSS学习笔记 制作一个漂亮的表格
- table表格的制作
- 网页表格的制作
- HTML表格的制作
- 简单表格的制作
- HTML 表格的制作
- 表格的制作
- [笔记]css2对表格增加的一些东东
- 表格的一些属性
- 网页表格的制作技巧
- 制作无须表格的表单
- latex 复杂表格的制作
- jquery 制作的表格效果
- 制作一个漂亮的表格
- 一个简单的表格制作
- Linux C文件操作(三)
- 字符数组的定义和初始化
- Effective前端4:尽可能地使用伪元素
- JavaSE_JodaTime 应用 转换含英文简写的月份
- Effective前端3:用CSS画一个三角形
- 制作表格的一些笔记
- java.net.SocketException: recvfrom failed: ECONNRESET (Connection reset by peer)我的解决办法
- 一个简单的剪刀石头布游戏(C++实现)
- BZOJ 1029: [JSOI2007]建筑抢修
- 怎样实现前端裁剪上传图片功能
- boostrap表单控件状态(禁用状态)
- Java基础学习之线程池
- 读nodejs项目源码所遇问题小结(一)
- zoj3471 Most Powerful 状压dp