移動<tr>根據是否包含在<tr>中的複選框被選中

Question

我有一個'papers'表，其中包含6行和2列。第一欄是複選框，第二欄是報紙的標題。 一旦用戶選中了2個複選框，我想讓未選中複選框的行在選中複選框的行下移動。

我可以讓複選框自己移動但不是整行！任何幫助，你願意給是極大的讚賞，感謝提前:)

 function core2() { 
 
      var i = 0; 
 

 
      $('.ATT').each(function() { if ($(this).is(':checked')) { i += 1 } }); 
 
      }); 
 

 
      if (i < 2) { 
 
       $(".ATT:not(:checked)").insertBefore("#core2"); 
 

 
      }; 
 

 

 
      if (i == 2) { 
 
       $(".ATT:not(:checked)").insertAfter("#core2"); 
 
       
 

 
      }; 
 

 
     }

<table> 
 
     <tr class="core1" ><td><input type = "checkbox" name="examlist" value="ATTPTAX" id="ATTPTAX1" class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
 
      PAPER 1 
 
      </td> <td> 
 
      </label></td></tr> 
 
    <tr class="core1" ><td><input type = "checkbox" name="examlist" value="ATTPTAX" id="ATTPTAX2" class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
 
      PAPER 2 
 
      </td> <td> 
 
      </label></td></tr> 
 
    <tr class="core1" ><td><input type = "checkbox" name="examlist" value="ATTPTAX" id="ATTPTAX3" class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
 
      PAPER 3 
 
      </td> <td> 
 
      </label></td></tr> 
 
    <tr class="core1" ><td><input type = "checkbox" name="examlist" value="ATTPTAX" id="ATTPTAX4" class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
 
      PAPER 4 
 
      </td> <td> 
 
      </label></td></tr> 
 
    <tr class="core1" ><td><input type = "checkbox" name="examlist" value="ATTPTAX" id="ATTPTAX5" class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
 
      PAPER 5 
 
      </td> <td> 
 
      </label></td></tr> 
 
    <tr class="core1" ><td><input type = "checkbox" name="examlist" value="ATTPTAX" id="ATTPTAX6" class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
 
      PAPER 6 
 
      </td> <td> 
 
      </label></td></tr> 
 
<tr id="core2"><td>Core 2</td><td></td></tr> 
 
</table>

利奧

Answer 1

將您的HTML設置爲

<table> 
     <tr class="core1" > 
     <td> 
     <input type = "checkbox" name="examlist[]" value="ATTPTAX" id="ATTPTAX1" class="ATT"/> 
     </td> 
     <td> 
      PAPER 1 
     </td> 
     </tr> 
     <tr class="core" > 
     <td> 
     <input type = "checkbox" name="examlist[]" value="ATTPTAX" id="ATTPTAX1" class="ATT" /> 
     </td> 
     <td> 
      PAPER 2 
     </td> 
     </tr> 
     <tr class="core" > 
     <td> 
     <input type = "checkbox" name="examlist[]" value="ATTPTAX" id="ATTPTAX1" class="ATT" /> 
     </td> 
     <td> 
      PAPER 3 
     </td> 
     </tr> 
     <tr class="core" > 
     <td> 
     <input type = "checkbox" name="examlist[]" value="ATTPTAX" id="ATTPTAX1" class="ATT" /> 
     </td> 
     <td> 
      PAPER 4 
     </td> 
     </tr> 
     <tr class="core" > 
     <td> 
     <input type = "checkbox" name="examlist[]" value="ATTPTAX" id="ATTPTAX1" class="ATT" /> 
     </td> 
     <td> 
      PAPER 5 
     </td> 
     </tr> 
     <tr class="core" > 
     <td> 
     <input type = "checkbox" name="examlist[]" value="ATTPTAX" id="ATTPTAX1" class="ATT"/> 
     </td> 
     <td> 
      PAPER 6 
     </td> 
     </tr> 
</table> 

jQuery代碼將是：

$('input[type=checkbox]').click(function(){ 
    var index = 0; 
    $('input:checked').each(function(){ 
    $('table').prepend($(this).parents('tr')); 
    index++; 
    }) 
}); 

見琴：https://jsfiddle.net/ys219mbt/1/

Answer 2

之前插入另一個錶行（tr），你需要廣告然後使用此代碼：

function InsertRowBefore(rowId) { 
    var target = document.getElementById(rowId); 
    var element = document.createElement('tr'); 
    target.parentNode.insertBefore(element, target); 
    return element; 
}