如何实现纵横向合并table
0
悬赏园豆：50
[已关闭问题]
关闭于 2017-12-20 17:04
横向合并：
| 航1 | CA | 退票时间限制1 | 变更时间限制1 | 变更时间限制2 | |
| 航2 | CZ | 退票时间限制1 | |||
| 航3 | Td | 退票时间限制1s | 退票时间限制2s | 变更时间限制1s | 变更时间限制2s |
| 航3 | Tf | 退票时间限制1s | 退票时间限制2s | 变更时间限制1s | 变更时间限制2 |
| 航3 | TV | 退票时间限制1s | 退票时间限制2s | 变更时间限制1s | 变更时间限制2 |
纵向合并：
| 航1 | CA | 退票时间限制1 | 退票时间限制1 | 变更时间限制1 | 变更时间限制2 |
| 航2 | CZ | 退票时间限制1 | 退票时间限制1s | ||
| 航3 | Td | 退票时间限制1s | 退票时间限制2s | 变更时间限制1s | 变更时间限制2s |
| Tf | 变更时间限制2 | ||||
| TV |
如何动态实现纵横向合并talbe呢，C#,js都行
所有回答(7)
0
<td rowspan="" />
用这个
动态实现
@anywls: 用jq的话，遍历每一列，如果内容一样，就移除一个，并添加rowspan。用C#的话，先对要生成表格的数据进行检查，对需要合并的行进行标记，然后在生成表格。
@sinhbv: 单纯的横向或者纵向合并已经实现，问题是纵横向合并一起实现有问题，我想要的效果是这样
| 航1 | CA | 退票时间限制1 | 变更时间限制1 | 变更时间限制2 | |
| 航2 | CZ | 退票时间限制1 | |||
| 航3 | Td | 退票时间限制1s | 变更时间限制2s | ||
| Tf | 变更时间限制2 | ||||
| TV | 退票时间限制1s | 退票时间限制2s | 变更时间限制1s | ||
@anywls: 表格的数据结构是什么样的？
@sinhbv: sql数据，合并项为相同的字符串
@anywls:
public class MergeModel { public MergeModel() { ColMergeStart = this; RowMergeStart = this; ColSpan = false; RowSpan = false; ColNum = 1; RowNum = 1; } public bool ColSpan { get; set; } public bool RowSpan { get; set; } public int ColNum { get; set; } public int RowNum { get; set; } public MergeModel ColMergeStart { get; set; } public MergeModel RowMergeStart { get; set; } }
数据结构如上
而后
System.Data.DataTable dt=new System.Data.DataTable(); System.Data.DataTable source=new System.Data.DataTable();//假设数据来源 for (int i = 0; i < source.Columns.Count;i++) { dt.Columns.Add(); } for(int i = 0;i<source.Rows.Count;i++) { var row = dt.NewRow(); dt.Rows.Add(row); for(int j=0;j<source.Columns.Count;j++) { var mergeModel=new MergeModel(); row[j] = mergeModel; string preview; string current = source.Rows[i][j].ToString(); MergeModel previewMergeModel; if(j!=0) { previewMergeModel = dt.Rows[i][j - 1] as MergeModel; preview = source.Rows[i][j - 1].ToString(); if(current==preview) { mergeModel.ColSpan = true; mergeModel.ColMergeStart = previewMergeModel.ColMergeStart; mergeModel.ColMergeStart.ColNum++; } } if(i!=0) { preview = source.Rows[i - 1][j].ToString(); previewMergeModel = dt.Rows[i - 1][j] as MergeModel; if(current==preview) { mergeModel.RowSpan = true; mergeModel.RowMergeStart = previewMergeModel.RowMergeStart; mergeModel.RowMergeStart.RowNum++; } } } }
然后遍历dt，后成table
@sinhbv:
MergeModel previewMergeModel; if(j!=0) { previewMergeModel = dt.Rows[i][j - 1] as MergeModel; preview = source.Rows[i][j - 1].ToString(); if(current==preview) { mergeModel.ColSpan = true; mergeModel.ColMergeStart = previewMergeModel.ColMergeStart; mergeModel.ColMergeStart.ColNum++; } }
代码到这儿有问题previewMergeModel = dt.Rows[i][j - 1] as MergeModel;会返回null当current==preview时会报错
@anywls: 第一个循环里改成
dt.Columns.Add(new System.Data.DataColumn(i.ToString(), typeof(MergeModel)));
0
//首行纵向重复合并
var tblen = $(".table tr").length;
for (var j = 0; j < tblen; j += 10) {
for (var i = 1; i <= 11; i++) {
var roomitem = $("#table" + j + " .room" + i);
$("#table" + j + " .room" + i + ":first").attr('rowspan', roomitem.length);
$("#table" + j + " .room" + i + ":first").attr('class', 'room');
$("#table" + j + " .room" + i).remove();
}
}
0
可以建两个模版 一个横向一个纵向 显示一个隐藏一个 转换的时候 显示一个隐藏另一个
不大明白你的意思，麻烦相信说一下
@anywls: 比如<div id="div1"><table><tr><td>表一</td></tr></table></div>
<div id="div2"><table><tr><td>表二</td></tr></table></div>
加载的时候 让div1显示 div2隐藏
如果转换则让div1隐藏 div2显示
0
关注，学习中。。。
0
JS去控制他把
0
页面展示上肯定用js合并比较好搞
0
用JS 就行很简单 colspan rowspan 就是表格的合并 是td的一项属性
开发网站 .NET或者java 这些后端语言
html div css js JQuery 这些都要会玩
