1

I use the HTML code. I have a table and I write in first tr td "A" and "B" in second tr td I have these two rows but I want to print "B" in first tr and "A" in second !! But I don't want to change my th position!! Is it possible with any script like js or Jquery or with any type js CDN....??

<table id='table1'>
 <tr>
  <th>name</th>
 </tr>
 <tr>
  <td>A</td>
 </tr>
 <tr>
  <td>B</td>
 </tr>
</table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Shamsher Sidhu
  • 83
  • 11
  • 1
    jQuery doesn't have a `.reverse()` function. You can call `remove()` on `tr:last-child` then `append()` it to the table: https://jsfiddle.net/khrismuc/ye1n93q5/ –  Feb 05 '19 at 05:27
  • if I also have th then what I do? – Shamsher Sidhu Feb 05 '19 at 06:13
  • If you are going to change the original requirement you need to change the text of the original question as well. – guest271314 Feb 05 '19 at 06:18
  • You should use correctly formed HTML, in this case `
    head
    A
    `. `tr` can appear in the `tbody` but it shouldn't for the way you are using it.     – freedomn-m Feb 05 '19 at 06:52

7 Answers7

2

Give this a try: Your script

$(function(){
    $("tbody").each(function(elem,index){
      var arr = $.makeArray($("tr",this).detach());
      arr.reverse();
        $(this).append(arr);
    });
});

The second way to do the same will be like this:

var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());

I hope this helps! Thanks!

rchau
  • 535
  • 9
  • 32
0

Since you can use reverse() with an array, you can use get() to convert this to an array first. If you have a dynamic number of rows you can use something like this:

$('tbody').each(function(){
    var row = $(this).children('tr');
    console.log(row)
    $(this).html(row.get().reverse())
})
Tenza
  • 586
  • 1
  • 3
  • 9
0

Use this below code:

$(function(){
    $("tbody").each(function(elem,index){
      var arr = $.makeArray($("tr",this).detach());
      arr.reverse();
        $(this).append(arr);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'>
        <tbody>  
            <tr>
                <td>A</td>
               </tr>
               <tr>
                <td>B</td>
               </tr>
               <tr>
                  <td>C</td>
                 </tr>
          </tbody>

       </table>
Mohit Gupta
  • 739
  • 1
  • 5
  • 16
0

You can loop through each row, starting at the bottom and add it to the bottom - this will reverse the rows.

This will mean you don't need to load all the rows into an array, but will mean additional DOM manipulation. 

var tbl = $("#table1>tbody")
var l = tbl.find("tr").length;
for (var i=l; i>=0; --i)
{
    tbl.find("tr").eq(i).appendTo(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'><tbody>
 <tr>  <td>A</td> </tr>
 <tr>  <td>B</td> </tr>
 <tr>  <td>C</td> </tr>
 <tr>  <td>D</td> </tr>
 <tr>  <td>E</td> </tr> 
</tbody></table>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • if I also have th then what I do? ' – Shamsher Sidhu Feb 05 '19 at 06:14
  • Why would it make any difference what's inside the `tr`? It's the `tr` that's being moved. If you have a `thead` then it also makes no difference as this already correctly only sorts `tbody`. – freedomn-m Feb 05 '19 at 06:50
  • If you really need to skip the first row(s) rather than use correct HTML, then just change the `i>=0` to `i>=1` (or however many rows). – freedomn-m Feb 05 '19 at 06:56
0

You can swap the .textContent of the <td> children of the <tr> elements

const {rows:[{cells:[a]}, {cells:[b]}]} = table1;
[a.textContent, b.textContent] = [b.textContent, a.textContent];
<table id='table1'>
 <tr>
  <td>A</td>
 </tr>
 <tr>
  <td>B</td>
 </tr>
</table>
guest271314
  • 1
  • 15
  • 104
  • 177
  • if I also have th then what I do? – Shamsher Sidhu Feb 05 '19 at 06:11
  • @ShamsherSidhu The same process applies. Can you include the actual HTML and expected result at the question instead of adding to the original requirement described at the question at comments? See https://stackoverflow.com/help/how-to-ask, https://stackoverflow.com/help/mcve – guest271314 Feb 05 '19 at 06:13
  • @ShamsherSidhu The edited HTML is inconsistent with the text of the original question. Given the updated HTML you can include a comma `,` before index `1` of the destructuring assignment `const {rows:[,{cells:[a]}, {cells:[b]}]} = table1` – guest271314 Feb 05 '19 at 06:20
  • @ShamsherSidhu The title of the question was not the issue. The text of the question still states _"I have a table and I write in first tr td "A" and "B" in second tr"_. The code at the previous comment handles the inclusion of an additional `` as the first element child of `` element and outputs the same result.
     – guest271314 Feb 05 '19 at 06:24
  • @ShamsherSidhu Not sure what you mean. The code at this comment https://stackoverflow.com/questions/54528075/reverse-table-rows-top-row-go-on-bottom/54528325#comment95859030_54528325 handles the updated HTML at the edited question and outputs the same result. – guest271314 Feb 05 '19 at 06:26
  • _"but i don't know how many rows are genrated then what i do ?"_ You are now trying to ask a third question. Have you taken the time to read the links at https://stackoverflow.com/questions/54528075/reverse-table-rows-top-row-go-on-bottom/54528325#comment95858901_54528325? – guest271314 Feb 05 '19 at 06:27
  • You shouldn't put your `tr/th` in the `tbody` like that - it should be in a `thead` and then apply this to the `tbody` instead. – freedomn-m Feb 05 '19 at 06:51
  • *"don't know how many rows"* was implied when asking the question.. nobody needs to change AB to BA! – freedomn-m Feb 05 '19 at 06:54
  • @freedomn-m _"don't know how many rows"_ was not implied at the actual text of the original question. – guest271314 Feb 05 '19 at 06:55
  • You **honestly** think someone *only* wants to swap a cell with text "A" with a cell with text "B"? Sure, that's what was asked, because it was put in a question to provide an example. I agree adding the extra `th` row was beyond the question, so even more changes should be addressed as you have. – freedomn-m Feb 05 '19 at 06:58
  • @freedomn-m Yes. That is what the question asked. The question also did not ask for any elements to be removed and appended from and to the `document`. The actual text of the question uses the term _"**print**"_ at _"I have a table and I write in first tr td "A" and "B" in second tr td I have these two rows but I want to print "B" in first tr and "A" in second"_. Evidently users took it upon themselves to ignore the plain language of the question and assume or presume the question meant more than what the actual language of the question included. – guest271314 Feb 05 '19 at 07:01
  • @freedomn-m You are free to have your perspective of the question. From perspective here the actual language used in the question does not ask for _elements_ to be removed from and appended to the `DOM`. The question only asks for text to be swapped between two elements. Technically it could stated that `TextNodes` are swapped, not HTML elements. – guest271314 Feb 05 '19 at 07:23
  • @guest271314 I agree it's certainly not the best-worded question and OP should have provided all the requirements in the question. – freedomn-m Feb 05 '19 at 07:25
0

Problem Solved

   <script type="text/javascript">
    var trCount = $('#table1 tr').length;
    var $rows = [];
    for (var i = 0; i < trCount; i++) 
      $rows.push($('#table1 tr:last-child').remove());
    $("#table1 tbody").append($rows);
   </script>

Thanks to all

Shamsher Sidhu
  • 83
  • 11
0

You can do that with pure vanilla JS, you don't need jquery or any other library for that.

function reverseOrder(table) {
 const rows = table.querySelector('tbody').children;
  const swaptemp = rows[0].children[0].innerHTML;
  rows[0].children[0].innerHTML = rows[1].children[0].innerHTML;
  rows[1].children[0].innerHTML = swaptemp;
}

const tableToReserveOrder = document.getElementById('table1');
reverseOrder(tableToReserveOrder);
<table id='table1'>
 <tr>
  <td>A</td>
 </tr>
 <tr>
  <td>B</td>
 </tr>
</table>

This is just a demonstration for your use case, you can play around with value of n which is 0 for this case where n+1 is 1.

SANGEET MANGHNANI
  • 111
  • 1
  • 5