Jquery - copy a row from one table to another - javascript

I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.
Here are the code snippets I think are critical:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
<script>
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Thanks for any suggestions!

You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.
<table id="drafted">
<tbody>
<tr>
<th width="36"> Rank </th>
<th width="141"> Player Name </th>
<th width="52">Position </th>
<th width="38">Team </th>
<th width="69"> Bye Week </th>
</tr>
</tbody>
</table>
function DraftPlayer(o) {
var p = $(o).closest('tr');
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow)
p.remove();
}

function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.innerHTML;
//alert(cloneRow )
copyTable.append("<tr>"+cloneRow+"</tr>");
p.parentNode.removeChild(p);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted" border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
</body>
</html>
A lot of mistakes in your code. Go through my code ,I edited it, Works Fine

You need to convert the DOM Element to jquery object in order to use the clone() function.
The modified DraftPlayer() function is:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
Suggestions:
There are some problem with your HTML also
Modify the table tag.
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>

Related

NodeList from .innerHTML to Array or String

I am trying to save cell entries of a randomly sorted HTML table to a variable in JavaScript. I am so far that I get a nodeliste of the first column at the click of a button. My question is, how can I convert this NodeListe into an array? I have tried different things like Array.prototype.slice.call (nl); inside the findOrder function (inside for declaration) but it does not seem to have been very successful, since the individual entries appear as an array instead of all the entries in one array.
Working code:
function randomSort()
{
var row = document.getElementById("sort").rows;
var rC = row.length;
var tableBody = document.getElementById("idforparentnode").parentNode;
for(i=0;i<rC;i++){
tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
}
}
function findOrder()
{
var orderlist = document.getElementsByClassName("order");
for (var i=0; i<orderlist.length; i++)
{
var nl = orderlist[i].innerHTML;
console.log(nl);
}
}
<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>
<p>Click the button to sort the table randomly:</p>
<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>
<table border="1" id="myTable">
<thead>
<th style="display:none;"></th>
<th>Name</th>
<th>Current Exchange Rate</th>
</thead>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">1</td>
<td>General Electric</td>
<td>19,57</td>
</tr>
<tr>
<td class="order" style="display:none;">2</td>
<td>Johnson & Johnson</td>
<td>119,14</td>
</tr>
</tbody>
<tbody id="sort">
<tr id="idforparentnode">
<td class="order" style="display:none;">3</td>
<td>Microsoft</td>
<td>65,92</td>
</tr>
<tr>
<td class="order" style="display:none;">4</td>
<td>Verizon</td>
<td>40,82</td>
</tr>
<tr>
<td class="order" style="display:none;">5</td>
<td>American Express</td>
<td>77,21</td>
</tr>
<tr>
<td class="order" style="display:none;">6</td>
<td>WhatSoEver</td>
<td>12,34</td>
</tr>
</tbody>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">7</td>
<td>Apple</td>
<td>133,90</td>
</tr>
<tr>
<td class="order" style="display:none;">8</td>
<td>Nintendo</td>
<td>43,53</td>
</tr>
<tr>
<td class="order" style="display:none;">9</td>
<td>WhatEver</td>
<td>999,99</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p>
<p id="orderdisplay"></p>
</body>
</html>
orderlist is actually an HTMLCollection. You can convert NodeList or HTMLCollection to an Array using spread element
function randomSort()
{
var row = document.getElementById("sort").rows;
var rC = row.length;
var tableBody = document.getElementById("idforparentnode").parentNode;
for(i=0;i<rC;i++){
tableBody.insertBefore(row[Math.ceil(Math.random()*(rC-1))],row[i]);
}
}
function findOrder()
{
var orderlist = [...document.getElementsByClassName("order")];
console.log(Array.isArray(orderlist));
for (var i=0; i<orderlist.length; i++)
{
var nl = orderlist[i].innerHTML;
console.log(nl);
}
}
<!DOCTYPE html>
<html>
<title>Sort a HTML Table Randomly</title>
<body>
<p>Click the button to sort the table randomly:</p>
<p><button onclick="randomSort()">Shuffle Line 3-6</button></p>
<table border="1" id="myTable">
<thead>
<th style="display:none;"></th>
<th>Name</th>
<th>Current Exchange Rate</th>
</thead>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">1</td>
<td>General Electric</td>
<td>19,57</td>
</tr>
<tr>
<td class="order" style="display:none;">2</td>
<td>Johnson & Johnson</td>
<td>119,14</td>
</tr>
</tbody>
<tbody id="sort">
<tr id="idforparentnode">
<td class="order" style="display:none;">3</td>
<td>Microsoft</td>
<td>65,92</td>
</tr>
<tr>
<td class="order" style="display:none;">4</td>
<td>Verizon</td>
<td>40,82</td>
</tr>
<tr>
<td class="order" style="display:none;">5</td>
<td>American Express</td>
<td>77,21</td>
</tr>
<tr>
<td class="order" style="display:none;">6</td>
<td>WhatSoEver</td>
<td>12,34</td>
</tr>
</tbody>
<tbody class="avoid-sort">
<tr>
<td class="order" style="display:none;">7</td>
<td>Apple</td>
<td>133,90</td>
</tr>
<tr>
<td class="order" style="display:none;">8</td>
<td>Nintendo</td>
<td>43,53</td>
</tr>
<tr>
<td class="order" style="display:none;">9</td>
<td>WhatEver</td>
<td>999,99</td>
</tr>
</tbody>
</table>
<br>
<input type="button" value="Display Order (based on standard order)" onclick="findOrder()">
<br>
<p>Display order of rows: </p>
<p id="orderdisplay"></p>
</body>
</html>

Duplication while appending the rows in jquery

I am new to jquery and javascript.please help me to resolve this error. When clicking the checkbox(more than 3 times) it append the cells more than one time. Thanks in advance. Please help me. * its appending the cells more than once
function suma()
{
alert("hi");
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
Try this,
function suma() {
$('#one').on("click", function() {
var appendStr = "<td> a </td><td> b</td><td> c</td>";
$('#one input:checked').parent().parent().wrap("<tr></tr>")
.append(appendStr).appendTo("#two");
// add string inside TR and append the a b c then appendTo table.
});
}
Working example
Hope helps,
Well I don't know why you are having your jquery click event inside function.
Replace your function with this :
function suma(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
}
Check if the div(#two) already don't have the table("#one") then add it with find function then check if the table does not have this tr then add it be carful that you add table depending on if which will result in more than one with the same id so depend on class is prefer.
function suma()
{
alert("hi");
$('#one').on("click", function(){
if($("#two").find("#one")==0){
$('#one input:checked').parent().parent().appendTo("#two");
}
if($("#two").find("#one").find("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>") ==0){
$("#two").find("#one").append("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>");
}
});
}
You need to append additional text, then after need to append to #two
Try following code,
function suma()
{
var row = $('#one input:checked').parent().parent().append("<td> a </td><td> b</td><td> c</td>");
row.appendTo("#two");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
I think You are Looking For this.
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
</table>
</body>
</html>

How to pass html div id's dynamically to js function

I want to pass the div id from html to a js script dynamically
as such div id r1,r2,r3 needs to be passed in to the getElementById() in jS,so when user mouse over any div,it will get rotated automatically.
This is my first Question,if any Corrections suggested are welcome!
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1>
<button onclick="rotate() ">Flip Row1</button>
<script>
var rotate = function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
</script>
</body>
Edited my answer
<html>
<body>
<table>
<tbody>
<tr>
<td id="r1" onmouseover="rotate(this)"> Roboust</td>
<td id="r2" onmouseover="rotate(this)">Dynamic</td>
<td id="r3" onmouseover="rotate(this)">Adhere</td>
</tr>
<tr>
<td id="r4" onmouseover="rotate(this)">Popular</td>
<td id="r5" onmouseover="rotate(this)">Trending</td>
<td id="r6" onmouseover="rotate(this)">Favourite</td>
</tr>
<tr>
<td id="r7" onmouseover="rotate(this)">Famous</td>
<td id="r8" onmouseover="rotate(this)">Blockbouster</td>
<td id="r9" onmouseover="rotate(this)">Navie</td>
</tr>
</tbody>
</table>
<script>
var rotate = function(x) {
if(x.className == "rotated"){
x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "";
}
else{
x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
x.className = "rotated";
}
}
</script>
</body>
</html>
you have several errors try it like this
<table>
<tr>
<td id="r1" onmouseover="rota(r1)"> Roboust</td>
<td id="r2" onmouseover="rota(r2)">Dynamic</td>
<td id="r3" onmouseover="rota(r3)">Adhere</td>
</tr>
</table>
<script>
function rota(i) {
var x = document.getElementById(i);
x.style.transform="rotateX(180deg)";
x.style.transition='0.6s';
}
</script>
</body>
You can also try this way -
<table id="myTable">
<tbody>
<tr>
<td id="r1"> Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<script>
document.getElementById('myTable').onmouseover = function(event) {
if (event.target.tagName.toUpperCase() == "TD") {
event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
}
</script>

Click button and go back to first one after first click

<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
This is my html code.
After clicking the button, the table will change the height and width size.
I want to do this: after changing the size, if user clicks the button again, the table will change back to its original size or maybe it can change the size again as its original size.
Thank you!
If you accept css involved, you can use toggle to toggle certain class to achieve that.
And from, css length, 1000 is not a valid css value, you should use something like '1000px', otherwise the width/height would take no effect.
#myTable.changed {
width: 500px;
height: 300px;
}
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').classList.toggle('changed');
return true;
}
</script>
</head>
<body>
<!-- Note that the style you give here would not have an effect, as `height:1000` or `width:400` are not valid css length -->
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
And if css is not in concern, then you can just use a flag to decide the behavior of that function, jsfiddle
<script type="text/javascript">
var changeFlag = false;
function change() {
var table = document.getElementById('myTable');
changeFlag = !changeFlag;
var width, height;
if (changeFlag) { // Click in odd, then change to new w/h
width = '500px';
height = '600px';
} else { // Click in even, change to origin size.
width = '400px';
height = '1000px';
}
table.style.width = width;
table.style.height = height;
return true;
}
</script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
if(document.getElementById('myTable').style.height == "400px") {
document.getElementById('myTable').style.height= "1000";
document.getElementById('myTable').style.width= "400";
}
else {
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
I changed change function to work with your purpose.
Let you check this code
try this :
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
var isToggled = false;
function toggleSize()
{
if(!isToggled)
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
isToggled = true;
}
else
{
document.getElementById('myTable').style.height= "900";
document.getElementById('myTable').style.width= "400";
isToggled = false;
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="toggleSize()" value="Change It">
</center>
</body>
</html>
Try this
.myTable1 {
height : 1000px;
width : 400px;
}
.myTable2 {
height : 400px;
width : 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change(){
$('#myTable').toggleClass("myTable1");
$('#myTable').toggleClass("myTable2");
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" id="myTable" align="center" class="myTable1">
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>

Rotate a table 90 degrees

I have a table that looks something like this:
<table><tbody>
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
<tr><td>d</td><td>4</td></tr>
<tr><td>e</td><td>5</td></tr>
<tr><td>f</td><td>6</td></tr>
<tr><td>g</td><td>7</td></tr>
</tbody></table>
I need it to get to something like this:
<table><tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
<td>e</td><td>f</td><td>g</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
<td>5</td><td>6</td><td>7</td>
</tr>
</tbody></table>
example
I'm thinking something like this should work, but I'm kinda lost, how would I go about this:
Here's what I started
I'm open to Javascript, jQuery or even CSS for this.
This will swap the rows and columns of any size tbody,
as long as rows all have the same number of cells.
<!doctype html>
<html lang= "en">
<head>
<meta charset= "utf-8">
<title> Small Test Page</title>
</head>
<body>
<script>
function tableSwap(){
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>
<h1> Small Test Page</h1>
<p> <button type= "button" id= "tableSwapBtn" onclick= "tableSwap()">
Swap rows and columns</button> </p>
<table style="width:300px;border:1px" rules="all">
<tbody>
<tr> <td> a</td> <td> 1</td> </tr>
<tr> <td> b</td> <td> 2</td> </tr>
<tr> <td> c</td> <td> 3</td> </tr>
<tr> <td> d</td> <td> 4</td> </tr>
<tr> <td> e</td> <td> 5</td> </tr>
<tr> <td> f</td> <td> 6</td> </tr>
<tr> <td> g</td> <td> 7</td> </tr>
</tbody>
</table>
</body>
</html>
Here is my solution:
http://jsfiddle.net/mtrwk/19/
$('table').each(function() {
$(this).after("<table><tbody></tbody></table>");
var newTable = $(this).next("table").children("tbody");
$(this).children("tbody").children("tr").each(function(rIndex, rItem){
$(this).children("td").each(function(dIndex, dItem){
if(newTable.children("tr:eq("+dIndex+")").html() == null){
newTable.append("<tr></tr>");
}
newTable.children("tr:eq("+dIndex+")").append($(this)[0].outerHTML);
});
});
});
I have a jquery class that accomplish this task. This class supports rowspan and colspan in the table as well.
Usage is really simple:
$('#newtable').tableflip($('#sourcetable'));
Here is the code of the class and sample usage: https://jsfiddle.net/adyhu78/9b1q4ys0/

Categories