I have a 'papers' table which contains 6 rows and 2 columns. In the first column is a checkbox and in the second row is the title of the paper. Once a user has checked 2 checkboxes i would like the rows which have unchecked checkboxes to move below the rows which have checked checkboxes.
I can get the checkboxes themselves to move but not the entire row! Any help you are willing to give is greatly appreciated, thanks in advance :)
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>
Leo
Aucun commentaire:
Enregistrer un commentaire