rowspan,colspan入テーブルの行列入れ替えをしたい

Question

下記のようなcolspan,rowspanが適用されたテーブルをhtml5で作成しています

内容的には下記のタグ通りになるのですが、出力時は
行と列が逆のほうがユーザーに伝わりやすい内容です

rowspanはcolspanに
colspanはrowspanに

変換し、行と列を入れ替えて(縦と横を入れ替えて)表示させるツール等をご存じの方はいらっしゃいませんでしょうか？

<table> <tr> <th>見出し1</th> <th>見出し2</th> <th>見出し3</th> <th>見出し4</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-1</td> <td colspan="2">2-2</td> <td rowspan="2">2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr> </table>

Answer 1

ためしに書いてみたら、地味にめんどくさかった。。。

function switchColsAndRows(tabid){
  // バグ放置版
  var cols = [];
  var rowIndex = 0;
  var maxColSize = 0;
  var tab = $('#' + tabid);
  // consider colspan value
  tab.find('tr').each(function(){
    if(!cols[rowIndex]){ cols[rowIndex] = []; }
    var colIndex = 0;
    $(this).find('td, th').each(function(){
      var colspan = $(this).attr('colspan');
      var colsize = (!colspan)?1:parseInt(colspan);
      cols[rowIndex][colIndex] = $(this)[0];
      colIndex += colsize;
      maxColSize = (cols[rowIndex].length > maxColSize)?cols[rowIndex].length:maxColSize;
    });
    rowIndex++;
  });
  // consider rowspan value
  for(var i = 0; i < cols.length; i++){
    for(var j = 0; j < cols[i].length; j++){
      var rowspan = $(cols[i][j]).attr('rowspan');
      var rowsize = (!rowspan)?1:parseInt(rowspan);
      for(var x = 1; x < rowsize; x++){
        cols[i+x].splice(j, 0, null);
      }
    }
  }
  tab.empty();
  var initAttr = function(elm,name,val){$(elm).removeAttr(name);$(elm).attr(name, val);};
  var replaceAttr = function(elm,name1,name2,v1,v2){
    v1=$(elm).attr(name1);v2=$(elm).attr(name2);
    initAttr(elm,name1,v2);initAttr(elm,name2,v1);
  };
  for(var i = 0; i < maxColSize; i++){
    var tr = $('<tr />');
    for(var j = 0; j < cols.length; j++){
      if(cols[j] && cols[j][i]){
        var col = cols[j][i];
        replaceAttr(col, 'rowspan', 'colspan');
        tr.append(col);
      }
    }
    tab.append(tr[0]);
  }
}

追記：
上のソースは戒めとして放置。
・一つのtd/thタグにcolspan、rowspanの両方が設定されているときに表示が壊れるのを修正
・ CertaiNさんの指摘にあったrowspanのネスト時に表示が壊れるのを修正

// たぶん完成版？？？
function switchColsAndRows(tabid){
  var cols = [];
  var rowIndex = 0;
  var maxColSize = 0;
  var tab = $('#' + tabid);
  // consider colspan value first
  tab.find('tr').each(function(){
    if(!cols[rowIndex]){ cols[rowIndex] = []; }
    var colIndex = 0;
    $(this).find('td, th').each(function(){
      var colspan = $(this).attr('colspan');
      var colsize = (!colspan)?1:parseInt(colspan);
      cols[rowIndex][colIndex] = $(this)[0];
      for(var k = 1; k < colsize; k++){
        cols[rowIndex][colIndex + k]={ omittable:true, rowspan:$(this).attr('rowspan')};
      }
      colIndex += colsize;
      maxColSize = (cols[rowIndex].length > maxColSize)?cols[rowIndex].length:maxColSize;
    });
    rowIndex++;
  });
  // consider rowspan value next
  for(var i = 0; i < cols.length; i++){
    for(var j = 0; j < cols[i].length; j++){
      var rowspan = $(cols[i][j]).attr('rowspan');
      rowspan = (rowspan)?rowspan:cols[i][j].rowspan;
      var rowsize = (!rowspan)?1:parseInt(rowspan);
      for(var x = 1; x < rowsize && cols[i+x]; x++){
        cols[i+x].splice(j, 0, { omittable : true, rowspan : 1});
      }
    }
  }
  tab.empty();
  var initAttr = function(elm,name,val){$(elm).removeAttr(name);$(elm).attr(name, val);};
  var replaceAttr = function(elm,name1,name2,v1,v2){
    v1=$(elm).attr(name1);v2=$(elm).attr(name2);
    initAttr(elm,name1,v2);initAttr(elm,name2,v1);
  };
  // rebuild table
  for(var i = 0; i < maxColSize; i++){
    var tr = $('<tr />');
    for(var j = 0; j < cols.length; j++){
      if(cols[j] && cols[j][i] && (!cols[j][i].omittable)){
        var col = cols[j][i];
        replaceAttr(col, 'rowspan', 'colspan');
        tr.append(col);
      }
    }
    tab.append(tr[0]);
  }
}

Comments

[mpyw]

いい線いってますがrowspanがネストしたときに壊れますね．

<table border="1">
<tr>
<th colspan="2">ハンドルネーム</th>
<td colspan="2">mpyw</td>
</tr>
<tr>
<th rowspan="4">趣味</th>
<th>麻雀</th>
<td colspan="2">三麻しかやりません</td>
</tr>
<tr>
<th rowspan="3">プログラミング</th>
<td colspan="2">PHP</td>
</tr>
<tr>
<td>JavaScript</td>
<td rowspan="2">初心者</td>
</tr>
<tr>
<td>Ruby</td>
</tr>
</table>

[tkturbo]

orz
。。。ちなみに一つのcolumnにcolspan・rowspanの両方が指定されていても壊れるのです。

[mpyw]

ググってみた感じ誰も完璧なコードを書いていなかったので，完成したらjQueryプラグインにでもすればすごい需要あるかも…

[mpyw]

検証用にお使いください…

<table border="1">
<tr>
<th colspan="2">ハンドルネーム</th>
<td colspan="3">mpyw</td>
<td>a</td>
</tr>
<tr>
<th rowspan="5">趣味</th>
<th rowspan="2">麻雀</th>
<td>三麻</td>
<td colspan="2">◎</td>
<td>b</td>
</tr>
<tr>
<td>四麻</td>
<td>△</td>
<td>初心者</td>
<td>c</td>
</tr>
<tr>
<th rowspan="3" colspan="2">プログラミング</th>
<td colspan="2">PHP</td>
<td>d</td>
</tr>
<tr>
<td>JavaScript</td>
<td rowspan="2">初心者</td>
<td>e</td>
</tr>
<tr>
<td>Ruby</td>
<td>f</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>*</td>
</tr>
</table>

<table border="1">
<tr>
<th rowspan="2">ハンドルネーム</th>
<th colspan="5">趣味</th>
<td>A</td>
</tr>
<tr>
<th colspan="2">麻雀</th>
<th colspan="3" rowspan="2">プログラミング</th>
<td>B</td>
</tr>
<tr>
<td rowspan="3">mpyw</td>
<td>三麻</td>
<td>四麻</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">◎</td>
<td>△</td>
<td rowspan="2">PHP</td>
<td>JavaScript</td>
<td>Ruby</td>
<td>D</td>
</tr>
<tr>
<td>初心者</td>
<td colspan="2">初心者</td>
<td>E</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>*</td>
</tr>
</table>

[tkturbo]

とりあえず修正版をうｐしてみますた。

検証ソースありがとうございます> CertaiNさん

[mpyw]

完璧ですね！

[tkturbo]

ちなみに
「すごい需要」←ないないw

[laqxvf]

教えてください。
このスクリプトはどのようにして特定のテーブルに適用するのでしょうか？
tabidというのがテーブルのIDなのでしょうか？

Answer 2

こちらのを修正すれば使えるのではないでしょうか？
jQueryでテーブルの行と列を入れ替える

Comments

[kutu]

こちらは調べましたが
rowspan,colspanに対応していないようでした

[kaputaros]

なので、修正加工すればいいのでは？と。

[mpyw]

修正加工は容易ではないですね．

[mpyw]

(投稿ミスにつき削除)