I have a table as follows:
<table id="testTable" class="mainTable">
<thead>
<tr>
<th>Title</th>
<th>
Select All
<input type="checkbox" id="select_all">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 2</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 3</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 4</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</tbody>
</table>
Currently, my JS code will get all first td elements from the table regardless of the checkbox, code is as follows:
$("#testTable tr").each(function() {
firsttd += $(this).find("td:first").html() + "\n";
});
However, I need to modify this so that my JS code will only get the first td element of the checked checkbox row.
You could add the condition directly on your selector like :
$("#testTable :checkbox:checked").each(function() {
firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});
Or if you're really in need of the loop and since you're using jQuery you could use .is(':checked') like :
if ( $(this).find(':checkbox').is(':checked') )
{
firsttd += $(this).find("td:first").html() + "\n";
}
Hope this helps.
var firsttd = "";
$("#testTable :checkbox:checked").each(function() {
firsttd += $(this).closest('tr').find("td:first").html() + "\n";
});
console.log(firsttd);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable" border=1>
<thead>
<tr>
<th>Title</th>
<th>Select All <input type="checkbox" id="select_all"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td><input type="checkbox" class="checkbox" checked></td>
</tr>
<tr>
<td>Cell 2</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 3</td>
<td><input type="checkbox" class="checkbox" checked></td>
</tr>
<tr>
<td>Cell 4</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</tbody>
Is this what you try to accomplish ? :
$("#testTable tr").each(function(){
firsttd += $(this).find('input[type="checkbox"]:selected').parent().html()+"\n";
});
You can simply only select the checked checkboxes directly in the JQuery selector with :checked :
$('#testTable tr input[type="checkbox"]:checked').each(function(){
firsttd += $(this).closest('tr').children().first().html()+"\n";
});
try this code with $(this).find(':checkbox').is(':checked')
$(document).ready(function() {
$(this).click(function() {
var firsttd = "";
$("#testTable > tbody > tr").each(function() {
if ($(this).find(':checkbox').is(':checked'))
firsttd += $(this).find("td:first").html() + "\n";
});
console.log(firsttd);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
<tr>
<th>Title</th>
<th>Select All <input type="checkbox" id="select_all"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 2</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 3</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td>Cell 4</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</tbody>
Find checkbox check it is checkd or not if it checked find its parents first td value in your variable.
var firsttd = '';
$("#testTable tbody tr td").each(function() {
if ($(this).find('input[type=checkbox]').is(":checked"))
firsttd += $(this).parent('tr').find("td:first").html() + "\n"
});
console.log(firsttd);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
<tr>
<th>Title</th>
<th>Select All
<input type="checkbox" id="select_all">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>
<input type="checkbox" class="checkbox" checked='checked'>
</td>
</tr>
<tr>
<td>Cell 2</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
<tr>
<td>Cell 3</td>
<td>
<input type="checkbox" class="checkbox" checked='checked'>
</td>
</tr>
<tr>
<td>Cell 4</td>
<td>
<input type="checkbox" class="checkbox">
</td>
</tr>
</tbody>
</table>
To get the first td of the checked checkbox
var elems = $("#testTable tr td input[checked]");
var str = "";
for(var i=0;i<elems.length;i++){
str += $(elems[i]).parent().parent().text()+"\n";
}
console.log(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable" class="mainTable">
<thead>
<tr><th>Title</th><th>Select All <input type="checkbox" id="select_all"></th></tr>
</thead>
<tbody>
<tr><td>Cell 1</td><td><input type="checkbox" class="checkbox"></td></tr>
<tr><td>Cell 2</td><td><input checked type="checkbox" class="checkbox"></td></tr>
<tr><td>Cell 3</td><td><input checked type="checkbox" class="checkbox"></td></tr>
<tr><td>Cell 4</td><td><input type="checkbox" class="checkbox"></td></tr>
</tbody>
$(document).ready(function() {
var firsttd = "";
$("#testTable tr td input:checkbox:first-child:checked").each(function()
{
firsttd += $(this).parent().parent().find("td:first").html() + "\n";
});
console.log(firsttd);
});
Fiddle here
Related
I have a table like so
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
I have a jquery array where there some ids stored of those rows example
id= [123,431,213]
what I want is when my page loads the ids which are inside the array to be already checked
$(document).ready(function () {
//code
});
I do not know how to go about this any help would be helpful
Iterate over each row in the table body and for each take the text value of the first cell and check to see if your array includes it.
const arr = [ 431, 123, 888 ];
// Iterate over the rows
$('tbody tr').each((i, el) => {
// Grab the first cell's text and coerce it to a number
const number = Number($(el).find('td').first().text());
// If the value is in the array
if (arr.includes(number)) {
// Find the input and check it
$(el).find('input[type="checkbox"]').prop('checked', 'checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>124</td>
<td>Bob</td>
<td>23</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
var ids = ['431', '132'];
$( document ).ready(function() {
$('td.id').each(function( index ) {
if (ids.includes($(this).text())){
$( "input.checkboxes" ).eq( index ).prop( "checked", true );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td class="id">123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementById("checx").getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+ FirstColumn.textContent);
};
}
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
</script>
//I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
</body>
</html>
I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
Thanks for your help in advance
the main issue that checkboxes ids has to be unique per element so you have to depend on class name rather than ids of checkboxes
in addition to the following code
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
Has to be inside the event handler
<!DOCTYPE html>
<html>
<body>
<!--External table-->
<table id="parentTable" border="1px">
<tr>
<td>
//price and quantity fields
<input type="text" name="price" label="Price" id="Pri">
<input type="text" name="quantity" label="Quantity" id="Qty">
</td>
<td>
<!--internal table-->
<table border="1px">
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="checkbox" id="checx1" class="checx"/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type="checkbox" id="checx2" class="checx"/></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type="checkbox" id="checx3" class="checx"/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type="checkbox" id="checx4" class="checx" /></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type="text/javascript">
checkboxes = document.getElementsByClassName("checx");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
var FirstColumn = currentRow.getElementsByTagName("td")[0];
alert("My text is: " + secondColumn.textContent +" "+FirstColumn.textContent);
document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;
};
}
</script>
</body>
</html>
I have a table like below :
<table>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
<tr>
<td>1</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
</table>
Grand Total = <input id="grand_total">
I am trying to display the Total Price of each row using jquery keyup function.
and also want to display the grand total price of the each row.
the formula of finding the Total Price is given below :
discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity
How can I do this please help
i am trying simply just summing all value like this :
<script type="text/javascript">
$(document).ready(function(){
$(".expensess").each(function() {
$(document).on('keyup', '.expensess', function() {
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expensess").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>
But m confused how to implement the above formula for calculate the total price.
$('input.qty,input.price,input.discount').on('change keyup',function(){
var $tr = $(this).closest('tr'),
$qty = $tr.find('input.qty') ,
$price= $tr.find('input.price'),
$discount= $tr.find('input.discount'),
$total= $tr.find('input.expensess_sum'),
$grand_total=$('#grand_total');
$total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
var grandTotal=0;
$('table').find('input.expensess_sum').each(function(){
if(!isNaN($(this).val()))
{grandTotal += parseInt($(this).val());
}
});
if(isNaN(grandTotal))
grandTotal =0;
$grand_total.val(grandTotal)
})
input{
width:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody><tr>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
</tr>
<tr>
<td>1</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
</tbody></table>
Grand Total = <input id="grand_total" disabled="">
</body>
Did it by using simple java script Code!
var sumExpenses = 0;
var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');
for (var i = 0; i < tdBudget.length; i++) {
if (tdBudget[i].className == "spanexpense") {
sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
}
}
document.getElementById('sumExpenses').innerHTML = sumExpenses;
<table class="table table-bordered">
<thead>
<tr>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
</tr>
</thead>
<tbody id="tableBudget">
<tr>
<td class="spanexpense">
12
</td>
<td class="spanexpense">
23
</td>
<td class="spanexpense">
23
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td id="sumExpenses"></td>
</tr>
</tfoot>
</table>
Fiddle https://jsfiddle.net/ey2gLp7t/
I am new to jquery and javascript.please help me to resolve this error. When clicking the checkbox(more than 3 times) it append the cells more than one time. Thanks in advance. Please help me. * its appending the cells more than once
function suma()
{
alert("hi");
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
Try this,
function suma() {
$('#one').on("click", function() {
var appendStr = "<td> a </td><td> b</td><td> c</td>";
$('#one input:checked').parent().parent().wrap("<tr></tr>")
.append(appendStr).appendTo("#two");
// add string inside TR and append the a b c then appendTo table.
});
}
Working example
Hope helps,
Well I don't know why you are having your jquery click event inside function.
Replace your function with this :
function suma(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
}
Check if the div(#two) already don't have the table("#one") then add it with find function then check if the table does not have this tr then add it be carful that you add table depending on if which will result in more than one with the same id so depend on class is prefer.
function suma()
{
alert("hi");
$('#one').on("click", function(){
if($("#two").find("#one")==0){
$('#one input:checked').parent().parent().appendTo("#two");
}
if($("#two").find("#one").find("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>") ==0){
$("#two").find("#one").append("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>");
}
});
}
You need to append additional text, then after need to append to #two
Try following code,
function suma()
{
var row = $('#one input:checked').parent().parent().append("<td> a </td><td> b</td><td> c</td>");
row.appendTo("#two");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
I think You are Looking For this.
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
</table>
</body>
</html>
I'm having some list of HTML check box in the table and its related data. In the list if I have selected a check box that will move to the top of the list.
Below is my code it works in <div> but not in the <table>.
jQuery(function($) {
$('.t1 .group-title').each(function() {
$if(this.checked) {
$item.insertBefore($('.t1 .group-title').first())
} else {
$item.appendTo($item.data('group'))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
You should bind the change event to checkbox element. Then based of checked state prepend()/append() parent tr element.
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
jQuery(function($) {
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
Try this code.
$('table').on('change', '[type=checkbox]', function() {
var $this = $(this);
var row = $this.closest('tr');
if ($this.prop('checked')) { // move to top
row.insertBefore(row.parent().find('tr:first-child'))
.find('label').html('move to bottom');
} else { // move to bottom
row.insertAfter(row.parent().find('tr:last-child'))
.find('label').html('move to top');
}
});
First you have to handle the event on change for the checkboxes, and then if the checkbox is checked you should prepend the tr parent to the tbody of your table.
$("#t1 input:checkbox").on("change",function(){
if(this.checked){
$("#t1 tbody").prepend($(this).parents("tr"))
}else{
$("#t1 tbody").append($(this).parents("tr"))
}
})
Here is a fiddle with your example working
https://jsfiddle.net/kLhxq3Lj/