それがコード化される必要があり、アルゴリズムの少しです。
私はjQueryや他のフレームワークに精通していないので、単にDOM機能を使用しましたが、アルゴリズムの考え方を理解できると思います。それを変換するのは難しいことではありません。
<html>
<head>
<script type="text/javascript">
function init() {
var table = document.getElementsByTagName("table")[0];
var trs = table.getElementsByTagName("tr");
var data = [];
var rows, columns;
// run through all TRs and TDs and collect the data into an array without
// empty slots
for (var r = 0; r < trs.length; r++) {
var tds = trs[r].getElementsByTagName("td");
for (var d = 0; d < tds.length; d++) {
if (tds[d].innerHTML) {
data[d] = (data[d] || []).concat(tds[d].innerHTML);
}
}
}
// the tricky thing now is to convert the X/Y alignment of the
// elements in data into a Y/X one for the table
columns = data.length; // target table will have this many columns
rows = data[0].length; // target table will have this many rows
table = document.createElement("table");
for (var r = 0; r < rows; r++) {
var tr = document.createElement("tr");
for (var c = 0; c < columns; c++) {
var td = document.createElement("td");
td.innerHTML = data[c][r] || "";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
}
</script>
</head>
<body onload="init()">
<table>
<tr class="row">
<td class="c1">Cell1</td>
<td class="c2">Cell2</td>
</tr>
<tr class="row">
<td class="c1">Cell1</td>
<td class="c2"></td>
<td class="c3">Cell3</td>
</tr>
<tr class="row">
<td class="c1">Cell1</td>
<td class="c2">Cell2</td>
<td class="c3"></td>
</tr>
</table>
</body>
</html>
出力がリクエストに一致しています。
これまでに何を試みましたか?そのコードを表示してください。 – sjngm