javascriptを使用してテーブルの1つの行から別のテーブル行にコンテンツを移動する方法

2つのテーブルがあります。テーブル1とテーブル2。ボタンの代わりにその行をクリックすると、 java-scriptを使用します。javascriptを使用してテーブルの1つの行から別のテーブル行にコンテンツを移動する方法

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

試したスクリプトを共有できますか？ –

私はここに新しいと私はスクリプトを共有する方法を知らない。 –

コード例があるとわかります..... –

あなたは

.droppable

Check this

Jsfiddle

出典

2016-08-27 16:19:07

私はその行をクリックすることによって、 "行コンテンツ"を別のものに移動するだけです。コンテンツをドラッグして削除する必要はありません。 –

HTML5のドラッグアンドドロップイベントを使用できない理由[Check The DataTransfer object]（http://www.html5rocks.com/jp/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>

重要にビットはです深いコピーを作成する操作と、appendToを使用して、クローンコピーの配置先を指定します。私はその行自体をどこでもクリックしてコピーするというあなたの希望を反映するために答えを編集したので、リンクが必要なく、行を取得するのにclosestもありません。

幸運！

出典

2016-08-27 16:19:54 derelict

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>

ただ、この例では私のコードは、それはあなたや他の友人のための完全な助けになると思い.Iご覧ください。

出典

2016-08-27 17:48:00

javascriptを使用してテーブルの1つの行から別のテーブル行にコンテンツを移動する方法

答えて

関連する問題