如何使用javascript將內容從表格的一行移動到另一個表格行

我有兩個表格。表格1和表格2.我想要將一行內容複製到另一行，而不是點擊該行時，使用java腳本。如何使用javascript將內容從表格的一行移動到另一個表格行

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("t1").clone().appendTo("t2"); 
 
    }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<table style="width:100%;border-style:dashed"> 
 
    <tr1> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr1> 
 
    
 
</table> 
 
</br> 
 
<table style="width:100%;border-style:dashed"> 
 
    <tr2> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr2> 
 
    
 
</table> 
 

 

 
<button>colne</button> 
 

 
</body> 
 
</html>

我將理解如果codepen例子進行說明。

來源

2016-08-27 waqas adil

你能分享你試過的腳本嗎？ –

我在這裏是新的，我不知道如何分享腳本。 –

如果給出codepen示例，我將不勝感激..... –

你可能想實現這一點使用

.droppable

Check this

Jsfiddle

來源

2016-08-27 16:19:07

我只需要將「行內容」移動到另一行，即可通過拖動它來刪除內容。 –

爲什麼你不能使用HTML5拖放事件[檢查「DataTransfer對象」]（http://www.html5rocks.com/en/tutorials/dnd/basics/） –

應該是jQuery的DOM操作簡單的事情，想想看：

<table id="first-table"> 
    <tbody> 
    <tr class="row-copier"><td>Content here</td><td>other content</td></tr> 
    <tr class="row-copier"><td>more content</td><td>second column</td></tr> 
    <tr class="row-copier"><td>...and something completely different</td><td><h1>YAY!</h1></td></tr> 
    </tbody> 
</table> 

<table id="second-table"> 
    <tbody> 
    <tr><td>Result Table</td><td>where stuff will get copied</td></tr> 
    </tbody> 
</table> 

<script> 
jQuery(function($) { 
    $('.row-copier').click(function() { 
    // select row-copier row, clone it, and append to second table body 
    $(this).clone().appendTo('#second-table>tbody'); 
    }); 
}); 
</script>

重要位是clone進行深層複製操作，appendTo指定克隆副本的放置位置。我編輯了答案，以反映您希望複製行本身的任何位置點擊的行，所以不需要任何鏈接，也不需要closest即可獲取該行。

祝你好運！

來源

2016-08-27 16:19:54 derelict

你可以給codepen示例嗎？ –

你可以嘗試複製代碼到codepen自己，只是在本地進行測試，它工作正常 - 如果你明白你應該能夠實現它的概念:) – derelict

jQuery（function（$）{toekn arror on the line –

$(document).ready(function() { 
 
       var items = []; 
 

 
       $("#myTable tr").on("click", function() { 
 
        var newTr = $(this).closest("tr").clone(); 
 

 
        var newButtonHTML = "<input type = 'button' value='Edit' onclick='Edit()' /><input type='button' value='Delete' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>"; 
 
        $(newButtonHTML).children("button").click(function(e) { 
 
        }); 
 

 
        $(newTr).children("td:last").html("").html(newButtonHTML); 
 
        items.push(newTr); 
 
        newTr.appendTo($("#stopsTable")); 
 

 
       }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div style="height: 700px;width: 100%;overflow: auto; float: left;"> 
 
      <table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" > 
 
       <thead> 
 
        <tr> 
 
         <th>S No</th> 
 
         <th>Stop Name</th> 
 
         <th>Longitude</th> 
 
         <th>Latitude</th> 
 
         <th>ETA</th> 
 
         <th>Status</th> 
 
         
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr > 
 

 
         <td >1</td> 
 
         <td>The Indian Heights School</td> 
 
         <td>28.56137</td> 
 
         <td>77.05249</td> 
 
         <td>06:06:12</td> 
 
         <td>Ignition_On</td> 
 
      
 

 
        </tr> 
 

 

 
        <tr > 
 

 
         <td >2</td> 
 
         <td>The Indian Heights School</td> 
 
         <td>28.56136</td> 
 
         <td>77.05246</td> 
 
         <td>06:06:23</td> 
 
         <td>Ignition_On</td> 
 
        
 
        </tr> 
 

 

 
        <tr > 
 

 
         <td >3</td> 
 
         <td>The Indian Heights School</td> 
 
         <td>28.56135</td> 
 
         <td>77.05242</td> 
 
         <td>06:06:31</td> 
 
         <td>Start</td> 
 
        
 
        </tr> 
 

 

 
        <tr > 
 

 
         <td >4</td> 
 
         <td>The Indian Heights School</td> 
 
         <td>28.56139</td> 
 
         <td>77.05245</td> 
 
         <td>06:06:41</td> 
 
         <td>Ignition_On</td> 
 
         
 
        </tr> 
 
       </tbody> 
 
    </table> 
 
    
 
     <table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;"> 
 
       <thead> 
 
        <tr> 
 

 
         <th>S No</th> 
 
         <th>Stop Name</th> 
 
         <th>Longitude</th> 
 
         <th>Latitude</th> 
 
         <th>ETA</th> 
 
         <th>Status</th> 
 
         
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
       </tbody> 
 
      </table>

只是看到在這個例子中我的代碼。我認爲這將有助於充分爲您和其他朋友。

來源

2016-08-27 17:48:00

如何使用javascript將內容從表格的一行移動到另一個表格行

回答

相關問題