Darious
Darious

Reputation: 121

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

I have tried to move a row value to another table and back to the previous table, but I could not find a solution.

$('#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>

fiddle

But, it's just removed the checked row only, it does not back to the previous.

If I clicked the row, it should back to the previous table.

How can I redo the row value from where I get it?

It will be appreciated, if help to solve this.

Upvotes: 2

Views: 2144

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

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/

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

after clone , append and Redo .. you need to use

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

for both of #one and #two

DEMO

Upvotes: 3

Related Questions