FIND LIVE DEMO HERE:
https://jsfiddle.net/pankajprajapatimtech/eLc6d8bt/
JUST COPY AND PASTE THE FOLLOWING CODE :-)
--------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PANKAJ PRAJAPATI:-)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#LeftMove").on('click', function () {
if (!$("#table2 tr input[type='checkbox'").is(':checked')) {
alert('Please check any check box of table 2');
return false;
}
var NoOfRowsChecks = "";
//loop through the all rows in table2 for append to table1
$("#table2 tr").each(function (i, row) {
var row = $(row);
if (row.find('input[type="checkbox"]').is(':checked')) {
var tr = '<tr class="success">' + row.html() + '</tr>';
NoOfRowsChecks = NoOfRowsChecks + tr;
row.remove();
}
});
$('#table1').append(NoOfRowsChecks);
});
$("#RightMove").on('click', function () {
if (!$("#table1 tr input[type='checkbox'").is(':checked')) {
alert('Please check any check box of table 1');
return false;
}
var NoOfRowsChecks = "";
//loop through the all rows in table1 for append to table2
$("#table1 tr").each(function (i, row) {
var row = $(row);
if (row.find('input[type="checkbox"]').is(':checked')) {
var tr = '<tr class="danger">' + row.html() + '</tr>';
NoOfRowsChecks = NoOfRowsChecks + tr;
row.remove();
}
});
$('#table2').append(NoOfRowsChecks);
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
TABLE 1
<table id="table1" class="table">
<thead>
<tr>
<th>select</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>
<input type="checkbox" value="" />
</td>
<td>A</td>
<td>KUMAR</td>
<td>a@email.com</td>
</tr>
<tr class="success">
<td>
<input type="checkbox" value="" />
</td>
<td>B</td>
<td>KUMAR</td>
<td>b@</a>email.com</td>
</tr>
<tr class="success">
<td>
<input type="checkbox" value="" />
</td>
<td>C</td>
<td>KUMAR</td>
<td>c@email.com</td>
</tr>
<tr class="success">
<td>
<input type="checkbox" value="" />
</td>
<td>D</td>
<td>KUMAR</td>
<td>d@gemail.com</td>
</tr>
<tr class="success">
<td>
<input type="checkbox" value="" />
</td>
<td>E</td>
<td>KUMAR</td>
<td>e@email.com</td>
</tr>
<tr class="success">
<td>
<input type="checkbox" value="" />
</td>
<td>F</td>
<td>KUMAR</td>
<td>f@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-1" style="text-align: center; margin-top: 12%;">
<div class="row"><input id="LeftMove" class="btn btn-danger" style="margin: 3px;" type="button" value="<-" /></div>
<div class="row"><input id="RightMove" class="btn btn-danger" type="button" value="->" /></div>
</div>
<div class="col-lg-4">
TABLE 2
<table id="table2" class="table">
<thead>
<tr>
<th>Select</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>
<input type="checkbox" value="" />
</td>
<td>A1</td>
<td>SINGH</td>
<td>a1@email.com</td>
</tr>
<tr class="danger">
<td>
<input type="checkbox" value="" />
</td>
<td>B1</td>
<td>SINGH</td>
<td>b1@email.com</td>
</tr>
<tr class="danger">
<td>
<input type="checkbox" value="" />
</td>
<td>C1</td>
<td>SINGH</td>
<td>c1@email.com</td>
</tr>
<tr class="danger">
<td>
<input type="checkbox" value="" />
</td>
<td>D1</td>
<td>SINGH</td>
<td>d1@email.com</td>
</tr>
<tr class="danger">
<td>
<input type="checkbox" value="" />
</td>
<td>E1</td>
<td>SINGH</td>
<td>e1@email.com</td>
</tr>
<tr class="danger">
<td>
<input type="checkbox" value="" />
</td>
<td>F1</td>
<td>SINGH</td>
<td>f1@email.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment