高分求代码 用js或jquery实现表格行列转换，表格含合并的单元格

Posted 2023-03-15

项目中遇到 一个包含colspan和rowspan的表格 行列转换的问题，请高手们贴上解决的js代码，就给分。不要模模糊糊的答案 eg.表格代码如下 <table id='tableId' cellspacing = 1 border = 1>
<tr>
<td> </td>
<td> </td>
<td colspan="4"><div align="center">维度1</div></td>
<td rowspan="3">未钻取指标3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2">维度2</td>
<td colspan="2">维度2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>钻取指标1</td>
<td>钻取指标2</td>
<td>钻取指标1</td>
<td>钻取指标2</td>
</tr>
<tr>
<td rowspan="2" align="center" valign="middle">对象1</td>
<td>对象2</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>对象2</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr></table>
请高手详细说下解决方案。最好贴上代码，一定给高分奖励。非常感谢！

<table id=\'tableId\' cellspacing = 1 border = 1>

     <tr>

    <td colspan="2" rowspan="3"> </td>

    <td colspan="4"><div align="center">维度1</div></td>

    <td rowspan="3">未钻取指标3</td>

  </tr>

  <tr>

    <td colspan="2">维度2</td>

    <td colspan="2">维度2</td>

  </tr>

  <tr>

    <td>钻取指标1</td>

    <td>钻取指标2</td>

    <td>钻取指标1</td>

    <td>钻取指标2</td>

  </tr>

  <tr>

    <td rowspan="2" align="center" valign="middle">对象1</td>

    <td>对象2</td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td>对象2</td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr></table> 

如果你不是要这种结果，请详细说明。

追问

我要维度显示在左边 对象显示在上面 你贴的这个效果是这个html的效果 我要得到他 行列转换的效果哦 表格行对象变成列 列变成行

追答

那你可以用表格嵌套，别只用一个table 先划一个大的table把大的布局打出来 然后往里面添加小的table 合并单元格这种事就不用说了吧。

追问

这么说 太抽象了 贴代码？

参考技术A Ps出个图先。
需要达到什么样子的效果
再不行手绘，让人能看懂就行。追问

效果就是维度到对象位置 位置到维度位置 行列转换

参考技术B 你好 这都不是模糊回答的问题 你的需求是啥 看不懂 原始表格如图 要改成啥样？追问

楼上贴出来的就是原始的效果 就是普通的表格行列转换 --行变成列 列变成行。现在问题解决了 就是把上面和左边的数据对象就达到效果了 。