In this tutorial, I will teach how you can easily Swap Rows with Columns of an HTML table with JavaScript.
Create an HTML table
First of all, create an HTML table.
<table>
<tbody>
<tr>
<td class="header">Heading 1</td>
<td class="header">Heading 2</td>
<td class="header">Heading 3</td>
</tr>
<tr>
<td>Heading A</td>
<td>content for 1 and A</td>
<td>content for 2 and A</td>
</tr>
<tr>
<td>Heading B</td>
<td>content for 1 and B</td>
<td>content for 2 and B</td>
</tr>
<tr>
<td>Heading C</td>
<td>content for 1 and C</td>
<td>content for 2 and C</td>
</tr>
</tbody>
</table>
Notice that I gave all the ‘td’ elements of the first ‘tr’ a CSS class called ‘heading’. I will be using the CSS class to provide a green color background to the elements. You can make this table dynamic by fetching data from the database with Dapper or other ORMs and showing the records inside the table.
Add CSS to the page
Next, add the CSS to the page.
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
color: #FFF;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr {
background-color: #2549f6;
}
table .header {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
Notice the last CSS – ‘table .heading’ provides green background color – ‘background-color: #4CAF50’.
JavaScript Code to swap rows with columns
The JavaScript Code to swap rows with columns in HTML Table
First add a button, to your web page, which on clicking will do the swapping.
<button onclick="Swap()">Click</button>
Next, add the JavaScript code.
<script>
function Swap() {
var t = document.getElementsByTagName('tbody')[0],
r = t.getElementsByTagName('tr'),
cols = r.length, rows = r[0].getElementsByTagName('td').length,
cell, next, tem, i = 0, tbod = document.createElement('tbody');
while (i < rows) {
cell = 0;
tem = document.createElement('tr');
while (cell < cols) {
next = r[cell++].getElementsByTagName('td')[0];
tem.appendChild(next);
}
tbod.appendChild(tem);
++i;
}
t.parentNode.replaceChild(tbod, t);
}
</script>
In the JavaScript code, I am looping through all the ‘tr’ and ‘td; elements of the ‘table’ and then swapping them.
Testing
Run your web page on your browser and you will see the ‘HTML’ table shown in the below image.
Next, click the ‘button’ to do the swapping. Now the table will look like this.
Hope you enjoyed learning this technique. Share your views in the comments below. Also, see my other similar tutorials on C-Sharpcorner: