在javascript中汇总html行的内容答案

【问题标题】：Rolling up the content of html rows in javascript在javascript中汇总html行的内容
【发布时间】：2012-11-20 14:38:26
【问题描述】：

我有一个有 20 行的表格，我希望它们的行在页面加载 1 分钟后上升（跳过第一行）。

例如：

首字母

第 1 行第 2 行第3行

第一节课

第 2 行第 3 行第1行

第二个状态

第 3 行第 1 行第2行

最后一步

第 1 行第 2 行第3行

我正在做这样的事情，但我不知道如何替换行的内容。如果可能的话，慢慢做（渐进会很好，但现在很重要）

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
    }
 }

非常感谢您的帮助

感谢 Razvan，成功了。做我想做的事情的整个代码（即在 40 秒后滚动整个行组 1 次）：

<!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>

【问题讨论】：

您可以稍微简化此解决方案，利用appendChild 将附加元素从其原始位置移除这一事实，因此无需克隆它。 jsfiddle.net/2gaPX

标签： javascript html html-table

【解决方案1】：

可能有更好的方法，但到目前为止我能想到的只有这些了:)

<!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>

【讨论】：