how to moving table rows use javascript?

Question

I want to move the 2nd row to be 1st but I don't know how to proceed. Can someone show me how to proceed ?

Here is my Table example :

<table>
                <caption><h1>Daftar Hasil Campur Warna</h1></caption>
                    <thead>
                        <tr>
                            <td>kode Primer</td>
                            <td>warna</td>
                            <td>Campur</td>
                            <td>kode Sekunder</td>
                            <td>warna</td>
                            <td>kode Tersier</td>
                            <td>Hasil Warna</td>
                            <td>Aksi</td>
                        </tr>
                    </thead>
                <?php
                    foreach ($result as $key => $value) {
                ?>
                <tbody>
                    <tr>
                        <td id="kdPrimer"><?php echo $value['kdPrimer']; ?></td>
                        <td id="warnap"><?php echo $value['warnap']; ?></td>
                        <td>+</td>
                        <td id="kdSekunder"><?php echo $value['kdSekunder']; ?></td>
                        <td id="warnas"><?php echo $value['warnas']; ?></td>
                        <td id="kdTersier"><?php echo $value['kdTersier']; ?></td>
                        <td id="warnat"><?php echo $value['warnat']; ?></td>
                        <td>
                            <a href="ubahdata.php?kdPrimer=<?php echo $value['kdPrimer']?>&kdSekunder=<?php echo $value['kdSekunder']?>">Ubah</a>
                            <a href="hapusdata.php?kdPrimer=<?php echo $value['kdPrimer']?>&kdSekunder=<?php echo $value['kdSekunder']?>">Hapus</a>
                        </td>
                    </tr>
                </tbody>    
                <?php
                    }       
                ?>

So I need to make a drag function to move the 2nd row to be 1st row. So what must I do?

@5180411347-EsaJuniarto You need to remove the code marks (backticks) from around your link — ButchMonkey
– ButchMonkey, Commented Dec 20, 2019 at 10:38
we can't re-program a picture. It's useful, but to do anything practical we also need to see some HTML and Javascript — ADyson
– ADyson, Commented Dec 20, 2019 at 10:42

Carsten Massmann · Accepted Answer · 2019-12-21 20:50:05Z

I simplified your code a little bit (an extra point to note: I replaced your id attributes with class as Ids must always be unique on each page!) and made it work without the need of any framework. You can of course still do it with jQuery. In that case you should have a closer look at .before() (or .insertBefore()).

In "Vanilla JavaScript" you can do the following (swapping columns):

function moveColBefore(from,before){
 Array.from(document.querySelectorAll('tr')).forEach(r=>{
  // remove superfluous #text nodes ..
  var cn=r.childNodes; 
  for (var i=cn.length;i--;) if (cn[i].nodeName=='#text') r.removeChild(cn[i]);
  // do the actual re-arranging of columns (for each row!)
  r.insertBefore(r.childNodes[from],r.childNodes[before])
 })
}
document.querySelector('body').addEventListener('click',ev=>{
  if(ev.target.nodeName=='BUTTON') 
    moveColBefore(ev.target.dataset.from,ev.target.dataset.before)
})

td {background-color:#eee}

<table>
<caption><h1>Daftar Hasil Campur Warna</h1></caption>
<thead>
  <tr>
    <td>kode Primer</td>
    <td>warna</td>
    <td>Campur</td>
    <td>kode Sekunder</td>
    <td>warna</td>
    <td>kode Tersier</td>
    <td>Hasil Warna</td>
    <td>Aksi</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="kdPrimer">kdPrimer</td>
    <td class="warnap">warnap</td>
    <td>+</td>
    <td class="kdSekunder">kdSekunder</td>
    <td class="warnas">warnas</td>
    <td class="kdTersier">kdTersier</td>
    <td class="warnat">warnat</td>
    <td> <a href="linktarget1">Ubah</a> <a href="linktarget2">Hapus</a> </td>
  </tr>
</tbody>
</table>
<button data-from="1" data-before="0" >move 1 before 0</button>
<button data-from="7" data-before="0" >move 7 before 0</button>

Edit: swapping rows

As I now read from your latest comment (maybe I misread your original post?) you actually want to swap rows and not columns. This is even easier to achieve, see below:

function moveRowBefore(from,before){
  var tb=document.querySelector('tbody');

  // remove superfluous #text nodes ..
  var cn=tb.childNodes; 
  for (var i=cn.length;i--;) if (cn[i].nodeName=='#text') tb.removeChild(cn[i]);
  // do the actual re-arranging of rows:
  tb.insertBefore(tb.childNodes[from],tb.childNodes[before])
}
document.querySelector('body').addEventListener('click',ev=>{
  if(ev.target.nodeName=='BUTTON') 
    moveRowBefore(ev.target.dataset.from,ev.target.dataset.before)
})

td {background-color:#eee}

<table>
<caption><h1>Daftar Hasil Campur Warna</h1></caption>
<thead>
  <tr>
    <td>kode Primer</td>
    <td>warna</td>
    <td>Campur</td>
    <td>kode Sekunder</td>
    <td>warna</td>
    <td>kode Tersier</td>
    <td>Hasil Warna</td>
    <td>Aksi</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="kdPrimer">0000FF</td>
    <td class="warnap">Biru</td>
    <td>+</td>
    <td class="kdSekunder">kdSekunder</td>
    <td class="warnas">warnas</td>
    <td class="kdTersier">kdTersier</td>
    <td class="warnat">warnat</td>
    <td> <a href="linktarget1">first</a> <a href="linktarget2">Hapus</a> </td>
</tr>
<tr>
    <td class="kdPrimer">FFFF00</td>
    <td class="warnap">Kuning</td>
    <td>+</td>
    <td class="kdSekunder">kdSekunder</td>
    <td class="warnas">warnas</td>
    <td class="kdTersier">kdTersier</td>
    <td class="warnat">warnat</td>
    <td> <a href="linktarget1">second</a> <a href="linktarget2">Hapus</a> </td>
  </tr>
</tbody>
</table>
<button data-from="1" data-before="0" >move row 1 before row 0</button>

I want to move the 0000FF line to the last line that switches with the FFFF00 line. can u help me? thanks

Collectives™ on Stack Overflow

how to moving table rows use javascript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related