Home/ Questions/Q 8859541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:05:24+00:00

I have a table with 20 lines, and I wanted their rows to go

  • 0

I have a table with 20 lines, and I wanted their rows to go up (skipping the first row line) after 1 minute the page has loaded.

Ex:

  • Initial

row1
row2
row3

  • First steo

row2
row3
row1

  • second state

row3
row1
row2

  • Final step

row1
row2
row3

I was doing something like this, but I don’t know how to replace the content of the rows.
And if possible do it slowly (gradual would be great but now essencial)

function roll()
 {     
    var oRows = document.getElementById('ultNot').getElementsByTagName('tr');
    var iRowCount = oRows.length;
    //repeat this iRowCount-1?
    for (i=iRowCount; i=2;;i--){
        var tempRow= oRows[i];
        var origRow;
        if (i=rowCount) {
            origRow=oRows[1];
        } else {
            origRow=cRows[i-1];
        }    
         var tempContent=origRow;
         //replace the contents of the rows
    }
 }

thanks a lot for any help

Thanks Razvan, that did the trick. The whole code to do what I wanted (which is to roll the complete group of rows 1 time after 40 seconds):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <table id="ultNot" style="border: 1">
    <tbody>
      <tr>
        <td>First row</td>
      </tr>
      <tr>
        <td>Second row</td>
      </tr>
      <tr>
        <td>Third row</td>
      </tr>
      <tr>
        <td>Fourth row</td>
      </tr>
      <tr>
        <td>Fifth row</td>
      </tr>
    </tbody>
  </table>
  <input type="button" onclick="iniciaScroll()" value="Click" />
  <script type="text/javascript">
    window.setTimeout(function() {
        iniciaScroll();
        ;
    }, 40000);
  </script>
  <script type="text/javascript">
    var interval;
    var cont = 0;
    var sizeTable = document.getElementById('ultNot').rows.length;
    function roll() {
        var table = document.getElementById('ultNot');
        var rows = table.rows;
        var firstRow = rows[1];
        var clone = firstRow.cloneNode(true);
        table.tBodies[0].appendChild(clone);
        table.tBodies[0].removeChild(firstRow);
        cont++;
        if (cont == (sizeTable - 1)) {
            clearInterval(interval);
            cont = 0;
        }
    }
    function iniciaScroll() {

        interval = window.setInterval(function() {
            roll();
        }, 3000);
    }
  </script>
  <!-- end: portal_latestthreads -->
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There probably is a better way but this is all I could come up with until now 🙂

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
    function roll() {
      var table = document.getElementById('myTable');
      var rows = table.rows;
      var firstRow = rows[0];
      var clone = firstRow.cloneNode(true);
      table.tBodies[0].appendChild(clone);
      table.tBodies[0].removeChild(firstRow);
    }
  </script>
</head>
<body>
  <table id="myTable" style="border: 1">
    <tbody>
      <tr><td>First row</td></tr>
      <tr><td>Second row</td></tr>
      <tr><td>Third row</td></tr>
      <tr><td>Fourth row</td></tr>
      <tr><td>Fifth row</td></tr>
    </tbody>
  </table>
  <input type="button" onclick="roll()" value="Click"/>
</body>
</html>
    • 0