如何将行值移动到另一个表，并在html中重做到上一个表

How to move a row value to another table and redo to the previous table in html?

本文关键字：并在 上一个 重做 html 另一个 移动      更新时间：2023-09-26

我曾尝试将一个行值移到另一个表并移回上一个表，但找不到解决方案。

$('#one tbody tr td input.checkbox').click(function() {
  if ($(this).attr('checked')) {
    var row = $(this).closest('tr').clone();
    $('#two tbody').append(row);
    $(this).closest('tr').remove();
  }
});
$('#two tbody tr td input.checkbox').click(function() {
  if ($(this).attr('checked')) {
    var row = $(this).closest('tr').clone();
    $('#one tbody').append(row);
    $(this).closest('tr').remove();
  }
});
$('button').on('click', function() {
  $('*').removeAttr('style');
  $('#one tbody tr td input.checkbox:not(:checked)').parent().css('border', 'red 1px dashed');
});
table {
  margin: 10px;
}
td {
  padding: 5px;
  background: lightblue;
}
button {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button>TEST SELECTOR!</button>
<table id="one">
  <tbody>
    <tr>
      <td>Stupid</td>
      <td>Flanders</td>
      <td></td>
    </tr>
    <tr>
      <td>Hi!</td>
      <td>There!</td>
      <td>
        <input type="checkbox" class="checkbox">
        <label>Check ME!</label>
      </td>
    </tr>
    <tr>
      <td>Ho!</td>
      <td>There!</td>
      <td>
        <input type="checkbox" class="checkbox">
        <label>Check ME!</label>
      </td>
    </tr>
    <tr>
      <td>Neighbor</td>
      <td>eno!</td>
      <td>
        <input type="checkbox" class="checkbox">
        <label>Check ME!</label>
      </td>
    </tr>
    <tr>
      <td>Okaly</td>
      <td>Dokaly</td>
      <td>
        <input type="checkbox" class="checkbox">
        <label>Check ME!</label>
      </td>
    </tr>
  </tbody>
</table>
<table id="two">
  <tbody>
    <tr>
      <td>Stupid</td>
      <td>Flanders</td>
      <td></td>
    </tr>
  </tbody>
</table>

小提琴

但是，它只是删除了选中的行，并没有返回到上一行。

如果我单击了该行，它应该会返回到上一个表。

如何从获取行值的位置重做行值？

如果能帮助解决这个问题，我们将不胜感激。

在克隆、追加和重做之后。。你需要使用

$('body').on('click','#one tbody tr td input.checkbox', function(){})
$('body').on('click','#two tbody tr td input.checkbox', function(){})

对于#1和#2

DEMO

try:

 $('body').on('click','#one tbody tr td input.checkbox',function(){
        if( $(this).attr('checked')){
        var row = $(this).closest('tr').clone();
         $('#two tbody').append(row);
             $(this).closest('tr').remove();
        }
    });
    $('body').on('click','#two tbody tr td input.checkbox',function(){
        console.log('cc')
        if(!$(this).attr('checked')){
        var row = $(this).closest('tr').clone();
         $('#one tbody').append(row);
             $(this).closest('tr').remove();
        }
    });
    $('button').on('click', function(){
        $('*').removeAttr('style');
        $('#one tbody tr td input.checkbox:not(:checked)').parent().css('border','red 1px dashed');
    });

jsfiddle：http://jsfiddle.net/wGGDb/76/

相关文章：