Emerson Emerson - 6 months ago 12
HTML Question

Rolling up the content of html rows in javascript

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>

Answer

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>