如何在Javascript中移動表格的所有行？

我想通過向上按鈕點擊向上調用JavaScript函數向上移動所有行。如果我的表中有如下內容：如何在Javascript中移動表格的所有行？

1 2 3 
4 5 6 
7 8 9

然後我想在第一排去持續向上函數向上移行如下：

4 5 6 
7 8 9 
1 2 3

以下是我的javascript代碼：

<body> 
<script> 
    function display() { 
     var table = document.createElement('table'); 

     table.setAttribute("id", "tbl"); 

     for (var i = 0; i < 4; i++) { 
      var tr = document.createElement('tr'); 
      for (var j = 0; j < 4; j++) { 
       var td = document.createElement('td'); 
       var text = document.createTextNode(j+i); 

       td.appendChild(text); 
       tr.appendChild(td); 
      } 
      table.appendChild(tr); 
     } 
     document.body.appendChild(table); 
    } 

     function upward() { 
       var rows = document.getElementById('tbl').rows.length; 
       for(var t=0;t< rows+1;t++) 
        { 
       var row = document.getElementById("myTable").rows[t]; 
       row.insertBefore(row.prev()); 
        } 

     } 
    </script> 

     <input id="display" type="button" value="Display" onclick="display();" /> 
     <input id="upward" type="button" value="upward" onclick="upward();" /> 
</body>

來源

2017-07-18 Nitara

能否請你展示你的HTML也 – Jivings

從下面的堆棧溢出鏈接https://stackoverflow.com/questions/4954373/move-table-rows-up-and-down參考答案-jquery-javascript –

應該不需要移動任何東西。將最上一行移到最下面，就完成了。 –

您需要刪除第一個元素，然後再次添加它。試試這個：

function upward() { 
 
    var table = document.getElementsByTagName('table'); 
 
    var table = table[0]; 
 
    var rows = table.getElementsByTagName('tr'); 
 
    var shifted = rows[0]; 
 
    rows[0].parentNode.removeChild(rows[0]); 
 
    table.appendChild(shifted); 
 
}

<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
    <tr> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    </tr> 
 
</table> 
 

 
<button onclick="upward()">Click!</button>

來源

2017-07-18 05:37:54

這可以很容易地使用jQuery來完成。基本上刪除第一行然後在最後重新插入它。

function upward(table) { 
 
\t var firstRow = $('tr:first-child',table).remove(); 
 
    table.append(firstRow); 
 
} 
 

 
$(function() { 
 
\t $('#shift').on('click',function(){ 
 
    \t upward($('table')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
<tr><td>1</td><td>2</td><td>3</td></tr> 
 
<tr><td>4</td><td>5</td><td>6</td></tr> 
 
<tr><td>7</td><td>8</td><td>9</td></tr> 
 
</table> 
 
<button id="shift">Shift</button>

來源

2017-07-18 05:39:10

如何在Javascript中移動表格的所有行？

回答

相關問題