-
Notifications
You must be signed in to change notification settings - Fork 1
/
updown2.html
172 lines (146 loc) · 4.31 KB
/
updown2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Up-Down 2</title>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
jQuery(function($) {
var tableOne = $('#one'),
tableTwo = $('#two'),
sequenceIndex = $('.sequence').index(),
moved = [];
function addChecked(e) {
tableOne.find(':checked').each(function() {
var row = $(this).closest('tr'),
clone;
// check if the row we're trying to
// move has already been moved
if ($.inArray(row[0], moved) < 0) {
// cache this row so we
// know it's been moved
moved.push(row[0]);
// clone and append to table2.
// store original row as data
// so that we can remove from
// cache when rows are removed
clone = row.clone()
.data('orig', row[0])
.appendTo(tableTwo.find('tbody'));
// because table1 doesn't have the same
// number of columns as table2 we have to
// create an extra column within the row
// to hold the sequence num
$('<td/>').insertAfter(clone.find('td').eq(sequenceIndex-1));
}
});
updateSequence();
e.preventDefault();
}
function removeChecked(e) {
tableTwo.find(':checked').each(function() {
var row = $(this).closest('tr'),
// get the index of this row within the cache
position = moved.indexOf(row.data('orig'));
// remove this row from the cache
moved.splice(position, 1);
// remove this row from the DOM
row.remove();
});
updateSequence();
e.preventDefault();
}
function moveUpDown(e) {
var button = $(this),
isUp = button.hasClass('up'),
rows = tableTwo.find(':checked').closest('tr');
if (!isUp) {
// if we're going down we need to
// reverse the row array so that the
// rows don't just switch around
Array.prototype.reverse.call(rows);
}
rows.each(function() {
var checked = $(this),
nextPrev = checked[isUp ? 'prev' : 'next']();
// move the row
if (nextPrev.length) {
checked[isUp ? 'insertBefore' : 'insertAfter'](nextPrev);
}
});
updateSequence();
e.preventDefault();
}
function updateSequence() {
tableTwo.find('tr').each(function() {
var row = $(this),
sequence = row.index()+1;
row.find('td').eq(sequenceIndex).text(sequence);
});
}
$('#add').on('click', addChecked);
$('#remove').on('click', removeChecked);
$('.up, .down').on('click', moveUpDown);
});
</script>
</head>
<body>
<table id="one" style="border:1px solid red;">
<caption>Table 1</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th> Name</th>
<th>System</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>12</td>
<td>Sam</td>
<td>FSS</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>87</td>
<td>Harry</td>
<td>MSS</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>23</td>
<td>Rita</td>
<td>MVV</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>65</td>
<td>Tom</td>
<td>RDD</td>
</tr>
</tbody>
</table>
<table id="two" style="border:1px solid green;">
<caption>Table 2</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th class="sequence">Sequence No</th>
<th>Name</th>
<th>System</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><hr><br>
<button id="add">Add</button>
<button id="remove">Remove</button>
<button class="up">UP</button>
<button class="down">DOWN</button>
</body>
</html>