Writing table in columns rather that rows (Extension)

This is an extension of this question.

I want to input data into the table in columns, not rows. The jquery example from the linked question works nicely except it moves the headings () as well. I am wondering how to leave the headings and just rotate the content. I tried this:

<script type="text/javascript">

    $(function() {

        $("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>

But the headings just disappear.

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

I just realized my answer might not solve your problem. You want to keep the headers at the top? They probably won't be useful after the rotation or match the new number of columns.

– Steve0
Nov 16 '18 at 17:18

add a comment |

This is an extension of this question.

<script type="text/javascript">

    $(function() {

        $("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>

But the headings just disappear.

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

I just realized my answer might not solve your problem. You want to keep the headers at the top? They probably won't be useful after the rotation or match the new number of columns.

– Steve0
Nov 16 '18 at 17:18

add a comment |

This is an extension of this question.

<script type="text/javascript">

    $(function() {

        $("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>

But the headings just disappear.

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

This is an extension of this question.

<script type="text/javascript">

    $(function() {

        $("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>

But the headings just disappear.

jquery html html-table

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

asked Jul 22 '18 at 15:13

TheChubbyPanda

551425

I just realized my answer might not solve your problem. You want to keep the headers at the top? They probably won't be useful after the rotation or match the new number of columns.

– Steve0
Nov 16 '18 at 17:18

add a comment |

I just realized my answer might not solve your problem. You want to keep the headers at the top? They probably won't be useful after the rotation or match the new number of columns.

– Steve0
Nov 16 '18 at 17:18

I just realized my answer might not solve your problem. You want to keep the headers at the top? They probably won't be useful after the rotation or match the new number of columns.

– Steve0
Nov 16 '18 at 17:18

add a comment |

2 Answers
2

active

oldest

votes

Here is some code that will "flip" a table with th's defined.

It figures out how many rows there are;

It sets up some templates

it then runs through the headers and reads the column transcribing it to a row.

Adds that row to a new table.

Replaces the old table with the new one.

Note any handlers you had on the old table would disappear, and because the table doesn't have any ths the code will not work to switch it back. This is only meant as a starting point.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

Edit with a little effort I was able to make this work and then reverse itself, again I suspect any event handlers will be lost.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

edited Nov 16 '18 at 16:51

answered Nov 15 '18 at 22:10

Steve0

1,7632922

add a comment |

-1

Maybe you can keep the 'th' elements only in another table at the top of this table. And that way you don't have to invert the headings. Only invert the down table with the data.

answered Jul 22 '18 at 15:34

Kiran Sripada

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51466474%2fwriting-table-in-columns-rather-that-rows-extension%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Here is some code that will "flip" a table with th's defined.

It figures out how many rows there are;

It sets up some templates

it then runs through the headers and reads the column transcribing it to a row.

Adds that row to a new table.

Replaces the old table with the new one.

Note any handlers you had on the old table would disappear, and because the table doesn't have any ths the code will not work to switch it back. This is only meant as a starting point.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

Edit with a little effort I was able to make this work and then reverse itself, again I suspect any event handlers will be lost.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

edited Nov 16 '18 at 16:51

answered Nov 15 '18 at 22:10

Steve0

1,7632922

add a comment |

Here is some code that will "flip" a table with th's defined.

It figures out how many rows there are;

It sets up some templates

it then runs through the headers and reads the column transcribing it to a row.

Adds that row to a new table.

Replaces the old table with the new one.

Note any handlers you had on the old table would disappear, and because the table doesn't have any ths the code will not work to switch it back. This is only meant as a starting point.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

Edit with a little effort I was able to make this work and then reverse itself, again I suspect any event handlers will be lost.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

edited Nov 16 '18 at 16:51

answered Nov 15 '18 at 22:10

Steve0

1,7632922

add a comment |

Here is some code that will "flip" a table with th's defined.

It figures out how many rows there are;

It sets up some templates

it then runs through the headers and reads the column transcribing it to a row.

Adds that row to a new table.

Replaces the old table with the new one.

Note any handlers you had on the old table would disappear, and because the table doesn't have any ths the code will not work to switch it back. This is only meant as a starting point.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

Edit with a little effort I was able to make this work and then reverse itself, again I suspect any event handlers will be lost.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

edited Nov 16 '18 at 16:51

answered Nov 15 '18 at 22:10

Steve0

1,7632922

Here is some code that will "flip" a table with th's defined.

It figures out how many rows there are;

It sets up some templates

it then runs through the headers and reads the column transcribing it to a row.

Adds that row to a new table.

Replaces the old table with the new one.

Note any handlers you had on the old table would disappear, and because the table doesn't have any ths the code will not work to switch it back. This is only meant as a starting point.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

Edit with a little effort I was able to make this work and then reverse itself, again I suspect any event handlers will be lost.

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table");

  var $newTable = $("<table>");

  var $newRowTemplate = $("<tr>");

  var rowCount = $table.find("tr").length;

  for (let i = 1; i <= rowCount; i++) {

    $newRowTemplate.append("<td>");

  }



  $.each($table.find("tr:first-child > th"), function(col, cell) {

    var $newRow = $newRowTemplate.clone();

    var txt = "";

    $($newRow.find("td")[0]).html($(cell).text());

    for (let y = 1; y <= rowCount; y++) {

      txt = $table

        .find(`tr:nth-child(${y}) > td:nth-child(${col+1})`).text();

      $($newRow.find("td")[y]).html(txt);

    }

    $newTable.append($newRow);

  });

  //$(this).after($newTable);

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

$("button.flip").click(function(e) {

  e.preventDefault();

  var $table = $(this).prev("table"); //orig table reference

  var $newTable = $("<table>"); //new table placeholder

  var rowCount = $table.find("tr").length; //the number of rows in the orig table



  //loop through the first rows cells

  $.each($($table.find("tr")[0]).children(), function(col, cell) {

    var $newRow = $("<tr>"); //create a new row

    $newRow.append($(cell).clone()); //append the current cell

    //traverse the column appending the cells to the row as we go

    for (let y = 1; y <= rowCount; y++) {

      $newRow.append($($($table.find("tr")[y]).children()[col]).clone());

    }

    $newTable.append($newRow); //put the new row in the new table

  });

  //if I managed to do some work lets remove the old table and replace it with the new one

  if (!$newTable.is(":empty")) {

    $table.remove();

    $(this).before($newTable);

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <thead>

    <tr>

      <th>Student</th>

      <th>Class</th>

      <th>Grade</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>John</td>

      <td>History</td>

      <td>B</td>

    </tr>

    <tr>

      <td>Sarah</td>

      <td>English</td>

      <td>D</td>

    </tr>

    <tr>

      <td>Sam</td>

      <td>Math</td>

      <td>A</td>

    </tr>

    <tr>

      <td>Quinn</td>

      <td>Javascript</td>

      <td>D-</td>

    </tr>

  </tbody>

</table>

<button class="flip">flip</button>

edited Nov 16 '18 at 16:51

answered Nov 15 '18 at 22:10

Steve0

1,7632922

edited Nov 16 '18 at 16:51

answered Nov 15 '18 at 22:10

Steve0

1,7632922

answered Nov 15 '18 at 22:10

Steve0

1,7632922

answered Nov 15 '18 at 22:10

Steve0

1,7632922

add a comment |

-1

Maybe you can keep the 'th' elements only in another table at the top of this table. And that way you don't have to invert the headings. Only invert the down table with the data.

answered Jul 22 '18 at 15:34

Kiran Sripada

add a comment |

-1

Maybe you can keep the 'th' elements only in another table at the top of this table. And that way you don't have to invert the headings. Only invert the down table with the data.

answered Jul 22 '18 at 15:34

Kiran Sripada

add a comment |

-1

Maybe you can keep the 'th' elements only in another table at the top of this table. And that way you don't have to invert the headings. Only invert the down table with the data.

answered Jul 22 '18 at 15:34

Kiran Sripada

Maybe you can keep the 'th' elements only in another table at the top of this table. And that way you don't have to invert the headings. Only invert the down table with the data.

answered Jul 22 '18 at 15:34

Kiran Sripada

answered Jul 22 '18 at 15:34

Kiran Sripada

answered Jul 22 '18 at 15:34

Kiran Sripada

answered Jul 22 '18 at 15:34

Kiran Sripada

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky