用javascript实现Table的行列互换

网上的一些实现table行列互换的例子,大部分是针对所有单元格的rowspan和colspan都等于1,而且形状为矩形的table。参考这些代码,我用javascript实现了较复杂的table的行列互换。 我要转换的table满足以下的条件: table的形状必须是矩形的; 每一行都至少有一个单元格的rowspan等于1,其他的单元格的rowspan可以为任意的值。 每一列都至少有一个单元格的colspan等于1,其他的单元格的colspan可以为任意的值。 代码如下所示,其中switchTable函数实现对表格的行列互换处理。 /// function getMaxColCount(oTable) { if (oTable.rows.length == 0) return 0; var row = oTable.rows(0); var maxColCount=0; for(var i=0;i < cell.colSpan;i++) { rowSpanNums[i] = cell.rowSpan-1; } for(var cellIndex=1;cellIndex < cell.colSpan;i++) { rowSpanNums[cell.colIndex+i] = cell.rowSpan-1; } } //处理第一行外的其他行 for(var rowIndex=1;rowIndex < oTable.rows.length;rowIndex++) { row = oTable.rows(rowIndex); for(var cellIndex=0;cellIndex < cell.colSpan;i++) { rowSpanNums[cell.colIndex+i] = cell.rowSpan; } } //下一行 for(var i=0;i < maxColCount;rowIndex
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现表格的行列自适应,有以下几种方式: 1. 使用CSS的table-layout属性 可以通过设置table-layout属性为auto来让表格自动调整列宽,而不是按照内容固定列宽。同时,也可以使用width属性来指定表格的总宽度,让表格能够自适应不同的屏幕大小。 例如: ``` table { table-layout: auto; width: 100%; } ``` 2. 使用CSS3的Flexbox布局 Flexbox布局可以轻松实现元素的自适应,包括表格的行列自适应。通过设置display属性为flex,可以将表格元素转换为Flex容器,然后使用flex属性来控制子元素的伸缩性,实现表格的行列自适应。 例如: ``` table { display: flex; flex-wrap: wrap; } td { flex: 1; } ``` 3. 使用JavaScript动态计算表格宽度 可以使用JavaScript来动态计算表格的宽度和每列的宽度,从而实现表格的自适应。通过遍历表格的每个单元格,获取其内容的宽度,并将最大宽度作为列宽度,然后设置每列的宽度和表格的总宽度,从而实现表格的自适应。 例如: ``` function adjustTable(table) { var row = table.rows[0]; var cellWidths = []; var tableWidth = 0; for (var i = 0; i < row.cells.length; i++) { var cell = row.cells[i]; cellWidths.push(cell.offsetWidth); tableWidth += cell.offsetWidth; } for (var i = 0; i < row.cells.length; i++) { var cell = row.cells[i]; cell.style.width = (cellWidths[i] / tableWidth * 100) + '%'; } table.style.width = '100%'; } ``` 以上三种方式都可以实现表格的行列自适应,具体使用哪种方式,取决于具体的需求和实现方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值