How to invert (transpose) the rows and columns of an HTML table?
http://jsfiddle.net/CsgK9/2/
html:
<table>
<tr>
<td>1</td>
<td>4</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
</tr>
</table>
<p><a href="#">Do it.</a></p>
js:
$("a").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
How to invert (transpose) the rows and columns of an HTML table which is generated dynamically from highchair in Angular 12?
Inside API there is no function to switch rows and columns only for exporting table. Change is possible with all data at module data data.switchRowsAndColumns but it's not your case I think.
You can try to change the core and use extending approach how to extending Highcharts
Find this Chart.prototype.getTableAST inside https://code.highcharts.com/modules/export-data.src.js
Old version example showing how to wrap core and change the way to create table at export: https://jsfiddle.net/BlackLabel/npwjxkuL/
How to transpose an HTML table?
try this code
<style>
td { padding:5px; border:1px solid #ccc;}
</style>
<script>
$("a").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
</script>
<table>
<tr>
<td>Heading1</td>
<td>Heading2</td>
<td>Heading3</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
<p><a href="#">Do it.</a></p>
don't forgot to link necessary (jquery1.6) file and appropriate html tags.
try give link http://jsfiddle.net/CsgK9/2/
see this link for original view
https://stackoverflow.com/a/6298066
Transpose Table with 'colspan' and 'rowspan' Attribute
I found this a nice challenge to do using plain old JavaScript. It differs enough from a previous question that I don't think it's a duplicate. Note that the code below works only for rowspans in the original table; the logic should be adaptable for colspans however.
It also doesn't take into account headers (theads or ths) or footers (tfooters). I don't think it would be horribly difficult to account for them.
I've added comments to the code below for guidance, but please do ask any questions you might have.
console.time();const transpose = m => m[0].map((x, i) => m.map(x => x[i]));const table = document.getElementById("transposed");const rows = Array.from(table.querySelectorAll("tr"));const totalRowCount = rows.length;
// First, create an array of the rows and within each element, // an array of the cells; easier to deal with than NodeLists.
// This could be done more cleverly with map or reduce, but// I like good old fashioned for loops.
const m = new Array(totalRowCount); for (let r = 0; r < rows.length; r++) { const row = rows[r]; const cells = Array.from(row.querySelectorAll("td")); m[r] = []; for (let c = 0; c < cells.length; c++) { const cell = cells[c]; let rowspan = cell.getAttribute("rowspan"); let colspan = cell.getAttribute("colspan"); rowspan = rowspan && parseInt(rowspan, 10); colspan = colspan && parseInt(colspan, 10);
// Note that I'm swapping colspan and rowspan here in the // cells of my array. I could do this after transposition, // but felt like doing it here. // Note also that unlike in the duplicate question, I // default the attribute to 1 rather than 0. I found that // some browsers get messed up with spanning 0 rows/columns. cell.setAttribute("colspan", rowspan || 1); cell.setAttribute("rowspan", colspan || 1); // I'm using a temporary object here to make it easier to // access information about the cell later on, without adding // that information to the DOM. m[r].push({ element: cell, index: c, rowspan: rowspan || 0, colspan: colspan || 0 }); }}
// Now m contains an array of arrays. Each of the 4 elements// in the topmost array contains a different number of elements.// The elements are objects containing the <td>, its index in // the row and the rowspan and colspan for that cell.
// So, we'll build another array of arrays, this time with // objects to represent the cells that are spanned.
let rowsToSpan = 0;let colsToSpan = 0;let cellsToInject = new Array(m.length);for (let r = 0; r < m.length; r++) { let colSpannedCells = m[r].filter(c => c.colspan && c.colspan > 1); cellsToInject[r] = new Array(colSpannedCells.length); for (let c = 0; c < colSpannedCells.length; c++) { let cell = colSpannedCells[c]; cellsToInject[r].push({ index: cell.index, cells: new Array(cell.colspan - 1) }); }}
// Now we have an array of arrays of the cells we want to inject, so we iterate // over them, splicing the "empty" cells into the array.var r = 0;
// One might wonder why I'm using for..of here, where I didn't previously; good // question. :) I was playing around with performance (hence the console.time() and// console.timeEnd()) and wanted to see the effect. This would work just as well// with a normal for loop.
for (let row of cellsToInject) { if (row && row.length) { var injectIndex = 0; var injectCount = 0; for (let col of row) { if (col && col.cells.length) { col.cells.fill({ element: null, rowspan: null, colspan: null }); // The trick here is to ensure we're taking account of previously // injected cells to ensure the new set of cells are injected in // the correct place. injectIndex = col.index + injectCount + 1; Array.prototype.splice.apply(m[r], [injectIndex, 0, ...col.cells]) // Keeping a running tally of the number of cells injected helps. injectCount += col.cells.length; } } } r++;}
// Now m is an array of arrays, with each element in the topmost// array having an equal number of elements. This makes the transposition// work better.
const transposed = transpose(m);
// Now we remove the tbody and inject our own.
table.removeChild(table.querySelector("tbody"));let tbody = document.createElement("tbody");
// Just iterate over the transposed array, creating a row for each// element, and iterate over the nested array, adding the element// for each (where present) back in.
for (let rw of transposed) { const row = document.createElement("tr"); for (let ce of rw) { if (ce && ce.element) { row.appendChild(ce.element); } } tbody.appendChild(row);}table.appendChild(tbody);console.timeEnd();table tr:first-child { color: #FFFFFF; background-color: #639187;}
table tr td:first-child { color: #FFFFFF; background-color: #639187;}<table cellspacing="0" border="1" id="not-transposed"> <tbody> <tr> <td></td> <td colspan="1">9:00</td> <td colspan="1">9:15</td> <td colspan="1">9:30</td> <td colspan="1">9:45</td> <td colspan="1">10:00</td> <td colspan="1">10:15</td> <td colspan="1">10:30</td> <td colspan="1">10:45</td> <td colspan="1">11:00</td> <td colspan="1">11:15</td> <td colspan="1">11:30</td> <td colspan="1">11:45</td> <td colspan="1">12:00</td> <td colspan="1">12:15</td> <td colspan="1">12:30</td> <td colspan="1">12:45</td> <td colspan="1">13:00</td> <td colspan="1">13:15</td> <td colspan="1">13:30</td> <td colspan="1">13:45</td> <td colspan="1">14:00</td> <td colspan="1">14:15</td> <td colspan="1">14:30</td> <td colspan="1">14:45</td> <td colspan="1">15:00</td> <td colspan="1">15:15</td> <td colspan="1">15:30</td> <td colspan="1">15:45</td> <td colspan="1">16:00</td> <td colspan="1">16:15</td> <td colspan="1">16:30</td> <td colspan="1">16:45</td> <td colspan="1">17:00</td> <td colspan="1">17:15</td> <td colspan="1">17:30</td> <td colspan="1">17:45</td> <td colspan="1">18:00</td> </tr>
<tr> <td rowspan="1">Madrid</td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td rowspan="1">London</td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> </tr> <tr> <td rowspan="1">Paris</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td> <td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td> <td> </td> </tr> </tbody></table><table cellspacing="0" border="1" id="transposed"> <tbody> <tr> <td></td> <td colspan="1">9:00</td> <td colspan="1">9:15</td> <td colspan="1">9:30</td> <td colspan="1">9:45</td> <td colspan="1">10:00</td> <td colspan="1">10:15</td> <td colspan="1">10:30</td> <td colspan="1">10:45</td> <td colspan="1">11:00</td> <td colspan="1">11:15</td> <td colspan="1">11:30</td> <td colspan="1">11:45</td> <td colspan="1">12:00</td> <td colspan="1">12:15</td> <td colspan="1">12:30</td> <td colspan="1">12:45</td> <td colspan="1">13:00</td> <td colspan="1">13:15</td> <td colspan="1">13:30</td> <td colspan="1">13:45</td> <td colspan="1">14:00</td> <td colspan="1">14:15</td> <td colspan="1">14:30</td> <td colspan="1">14:45</td> <td colspan="1">15:00</td> <td colspan="1">15:15</td> <td colspan="1">15:30</td> <td colspan="1">15:45</td> <td colspan="1">16:00</td> <td colspan="1">16:15</td> <td colspan="1">16:30</td> <td colspan="1">16:45</td> <td colspan="1">17:00</td> <td colspan="1">17:15</td> <td colspan="1">17:30</td> <td colspan="1">17:45</td> <td colspan="1">18:00</td> </tr>
<tr> <td rowspan="1">Madrid</td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td rowspan="1">London</td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background-color: rgb(204, 204, 204);" colspan="4" rowspan="1"></td> <td> </td> </tr> <tr> <td rowspan="1">Paris</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan="12" rowspan="1" style="background-color: rgb(204, 204, 204);"></td> <td colspan="4" rowspan="1" style="background-color: rgb(204, 204, 204);"></td> <td> </td> </tr> </tbody></table>Is there a CSS/HTML property/attribute that can swap a table's rows & columns?
Not that I'm aware of. Looks like you want to do something like this:
How to invert (transpose) the rows and columns of an HTML table?
Transpose dynamic table from rows to columns and vice versa
Using the same assumptions your example codes does (i.e. config.previewData always contains at least one object, and all objects have the same properties...)
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="(key, val) in config.previewData[0]">
<th>
{{ key }}
</th>
<td data-ng-repeat="row in config.previewData">
{{ row[key] }}
</td>
</tr>
</tbody>
</table>
Invert horizontal html table into vertical
We can do something like this
var x = $("#walls_settings_timers").find("th,td");
var i = $("#walls_settings_timers").find("tr").length;
var j = x.length/i;
console.log(i , j);
var newT= $("<table>").appendTo("body");
for (j1=0; j1<j;j1++){
var temp = $("<tr>").appendTo(newT);
for(var i1=0;i1<i; i1++){
temp.append($(x[i1*j+j1]).clone());
}
}
check out the jsFiddle here
jQuery to transpose HTML table with header and footer
I hacked away at the function to get it to do what I need. The updated version is below.
function tableTransform(objTable) {
if (typeof objTable != 'undefined') {
objTable.each(function () {
var $this = $(this);
var newrows = [];
$this.find("tbody tr, thead tr").each(function () {
var i = 0;
$(this).find("td, th").each(function () {
i++;
if (newrows[i] === undefined) {
newrows[i] = $("<tr></tr>");
}
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function () {
$this.append(this);
});
});
//switch old th to td
objTable.find('th').wrapInner('<td />').contents().unwrap();
//move first tr into thead
var thead = objTable.find("thead");
var thRows = objTable.find("tr:first");
var copy = thRows.clone(true).appendTo("thead");
thRows.remove();
//switch td in thead into th
objTable.find('thead tr td').wrapInner('<th />').contents().unwrap();
//add tr back into tfoot
objTable.find('tfoot').append("<tr></tr>");
//add tds into tfoot
objTable.find('tbody tr:first td').each(function () {
objTable.find('tfoot tr').append("<td> </td>");
});
return false;
}
}
I also created the updated fiddle below.
http://jsfiddle.net/4tobvo05/7/
I'm sure there are many optimizations or improvements that could be made so I am open to any suggestions that anyone might have.
Related Topics
Angular 2 Optional Route Parameter
How to Prevent the Backspace Key from Navigating Back
How Persistent Is Localstorage
How to Scrape Data Using Ruby Which Is Generated by a JavaScript Function
How to Get the Nth Occurrence in a String
Reserved Keywords in JavaScript
Browser-Independent Way to Detect When Image Has Been Loaded
The .Replace() Method Does Change the String in Place
Prevent Long Running JavaScript from Locking Up Browser
Format a Number as 2.5K If a Thousand or More, Otherwise 900
JavaScript Loops: For...In VS For
Access Parent's Parent from JavaScript Object
How to Improve Performance of Ngrepeat Over a Huge Dataset (Angular.Js)
Protractor E2E Test Case for Downloading PDF File
Send a File as Multipart Through Xmlhttprequest
Merge Keys Array and Values Array into an Object in JavaScript