How to share rows between two tables on the same page
Question
I want to do something like this:
As you can see they must be in the same html page and should transfer rows without refreshing the entire page again.
Someone can give me some help?
3 answers
solution1
0 2017-02-14 20:23:54
You could look at this code. It's completely made with Javascript and html.
It's called a picklist btw.
solution2
0 ACCPTED 2017-02-14 22:13:04
Here's a screen shot of the results:
Here's the important parts of the HTML:
<body ng-controller="MainCtrl">
<table border=1>
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in table1">
<td><input type="checkbox" ng-model="item.checked"></td>
<td><span ng-bind="item.data"></span></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="transferRight()">Transfer ></button>
<br>
<button ng-click="transferLeft()">< Transfer</button>
<br>
<br>
<table border=1>
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in table2">
<td><input type="checkbox" ng-model="item.checked"></td>
<td><span ng-bind="item.data"></span></td>
</tr>
</tbody>
</table>
</body>
Here's the important parts of the javascript/angularjs:
app.controller('MainCtrl', function($scope, $filter) {
$scope.table1 = [
{checked:false, data:'Data 1'},
{checked:true, data:'Data 3'},
{checked:true, data:'Data 4'},
{checked:false, data:'Data 6'},
{checked:false, data:'Data 7'}];
$scope.table2 = [
{checked:false, data:'Data 2'},
{checked:false, data:'Data 5'}];
$scope.transferRight = function() {
angular.forEach($filter('filter')($scope.table1, {checked: true}), function(value) {
value.checked = false;
$scope.table2.unshift(value);
$scope.table1.splice($scope.table1.indexOf(value), 1);
});
};
$scope.transferLeft = function() {
angular.forEach($filter('filter')($scope.table2, {checked: true}), function(value) {
value.checked = false;
$scope.table1.unshift(value);
$scope.table2.splice($scope.table2.indexOf(value), 1);
});
};
});
Here's a link to a working Plunker, http://plnkr.co/edit/qoARS4mtp5CQQnf1kogA?p=preview
solution3
-1 2017-02-14 21:04:50
just use append() or appendTo()
$(".toRight").click(function () {
$("#table1 input:checked").closest("tr").appendTo("#table2");
});
Here full code
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.