htmlテーブル値の交換

Question

htmlに2つのテーブルがあります。 チェックボックスを使用して行を選択すると、テーブルから別のテーブルに行を移動するにはどうすればよいですか？ 誰でも私にこれを行うサンプルJSを与えることができます。おかげ

Answer 1

はこれを試してみてください：

<script type="text/javascript"> 
function moveIt() { 
    $('#table-1 input[type=checkbox]:checked').each(function() { 
    var tr = $(this).parents('tr').get(0); 
    $('#table-2').append($(tr)); 
    }); 
} 
</script> 

<table border="1" id="table-1"> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>First</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>Second</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>Third</td> 
    </tr> 
</table> 

<table border="1" id="table-2"> 
</table> 

<input type="button" onclick="moveIt()" value="move selected lines from table-1 to table-2" /> 

はjQueryのを含めることを忘れないでください。

Answer 2

これは、別のtrのキーポイントは、innerHTMLプロパティを取得し、所望の部分

Answer 3

に移動することです

see this fiddle

に1つのTRのコンテンツをコピーする最も簡単な方法はありますが、これを行うことができますjQueryを使用してください。このようなものは仕事をするべきです。

$(function() { 
    // Bind button 
    $('#moveRows').click(moveSelectedRows); 
    // Select All-button 
    $('#selectAll').click(function() { 
     $('#table1 input[type="checkbox"]').prop("checked", true); 
    }); 
}); 

function moveSelectedRows() { 
    $('#table1 input[type="checkbox"]:checked').each(function() { 
     // Remove from #table1 and append to #table2 
     $('#table2').append($(this).closest('tr').remove()); 
     // Remove the checkbox itself 
     $(this).remove(); 
    }); 
} 

HTML

<a href="#" id="selectAll">Select All</a> 

<table id="table1"> 
    <tr> 
     <td>Foo1 <input type="checkbox" /></td> 
    </tr> 
    <tr> 
     <td>Bar2 <input type="checkbox" /></td> 
    </tr> 
</table> 

<table id="table2"> 
    <tr> 
     <th>Selected rows</th> 
    </tr> 
</table> 

<a id="moveRows" href="#">Move rows</a>