javascript source and target
http://friedcell.si/js/SortedTable/examples.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="css/payroll.css" rel="stylesheet" type="text/css" />
<title>SortedTable example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/sortTable.css" type="text/css" />
<style type="text/css">
body {
background: url(images/bg.png) repeat;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:200;
text-align: left;
text-decoration: none;
}
</style>
<script type="text/javascript" src="js/sortTableEvent.js"></script>
<script type="text/javascript" src="js/sortTable.js"></script>
<script type="text/javascript">//<![CDATA[
var sourceTable, destTable,s2,d2;
onload = function() {
sourceTable = new SortedTable('s');
destTable = new SortedTable('d');
sourceTable2 = new SortedTable('s2');
destTable2 = new SortedTable('d2')
mySorted = new SortedTable();
mySorted.colorize = function() {
for (var i=0;i<this.elements.length;i++) {
if (i%2){
this.changeClass(this.elements[i],'even','odd');
} else {
this.changeClass(this.elements[i],'odd','even');
}
}
}
mySorted.onsort = mySorted.colorize;
mySorted.onmove = mySorted.colorize;
mySorted.colorize();
secondTable = SortedTable.getSortedTable(document.getElementById('id'));
secondTable.allowDeselect = false;
//////////////////////////////////////////////////
}
function moveRows(s,d) {
var a = new Array();
for (var o in s.selectedElements) {
a.push(s.selectedElements[o]);
}
for (var o in a) {
var elm = a[o];
var tds = elm.getElementsByTagName('td');
for (var i in tds) {
if (tds[i].headers) tds[i].headers = d.table.id+''+tds[i].headers.substr(d.table.id.length);
}
d.body.appendChild(a[o]);
d.deselect(a[o]);
d.init(d.table);
d.sort();
s.deselect(a[o]);
s.init(s.table);
d2.body.appendChild(a[o]);
d2.deselect(a[o]);
d2.init(d.table);
d2.sort();
s2.deselect(a[o]);
s2.init(s.table);
}
}
//]]></script>
<style type="text/css">
input [type="button"] {font-size:20px;}
/* document styles */
.disclaimer {border-top:1px solid #ccc;color:#879AB7;padding-top:.5em;font-size:.9em;}
dl {margin:0 1em;padding:0;}
dl, form {float:left;}
li {padding:.1em 0;}
hr {clear:both;width:100%;background:#fff;height:0;border:0;border-bottom:1px solid #fff;margin:0 0 1em;padding:0;}
/* table styles */
table {border:0;padding:0;margin:0 0 1em;border-left:1px solid #336;border-top:1px solid #336;float:left;clear:left;}
tr {border:0;padding:0;margin:0;}
td, th {border:0;padding:2px 6px;margin:0;border-right:1px solid #336;border-bottom:1px solid #336;background-color:#EAEEF3;}
td[axis='number'], td[axis='date'] {text-align:right;}
th {white-space:no-wrap;background-color:#B4C4D1;padding:2px 20px;}
tfoot td {border-top:1px solid #003;}
thead th {border-bottom:2px solid #003;}
.odd td {background-color:#E8ECF1;}
.even td {background-color:#DDE5EB;}
.hover td {background-color:#A5B3C9;}
.sortedminus {background-color:#ecc;}
.sortedplus {background-color:#cec;}
.selrow td {background-color:#879AB7;}
/* source-dest example styles */
#s {float:left;}
#d {float:left;clear:none;}
#s2{float:left;}
#d2 {float:left;clear:none;}
form#tabletool {margin:0;padding:0.5em;}
form#tabletool fieldset {width:8em;text-align:center;}
form#tabletool legend {margin:0 auto;}
form#tabletool input {margin:0.5em;}
</style>
</head>
<body>
<div style="height:20px; color:white; background-color:rgb(67,120,182); border: 1px white solid; margin-bottom:0;">
<span>Access Control</span>
<INPUT style="float:right;" Type="button" VALUE="X" onClick="history.go(-1);return true;">
</div>
<input type="Button" value="Save" class="saveButton" onclick="alert('saved')"></input>
<div style="margin-left:150px;">
<div class="content" style="font-size:20px;">
<span>Administrator</span></div>
<div class="content" style="font-size:17x; height:200px; width:78%; border:1px solid black;">
<table class="sorted" id="s" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="sid"><span>ID</span></th>
<th id="sname"><span>Name</span></th>
<th id="sbirth"><span>Department</span></th>
</tr>
</thead>
<tbody>
<tr>
<td axis="number" headers="sid">1</td>
<td axis="string" headers="sname">John</td>
<td axis="date" headers="sbirth" title="IT">IT</td>
</tr>
<tr>
<td axis="number" headers="sid">2</td>
<td axis="string" headers="sname">David</td>
<td axis="date" headers="sbirth" title="AC">AC</td>
</tr>
<tr>
<td axis="number" headers="sid">3</td>
<td axis="string" headers="sname">Peter</td>
<td axis="date" headers="sbirth" title="Personnel">Personnel</td>
</tr>
</tbody>
</table>
<form id="tabletool" action="#" method="get">
<fieldset>
<legend>Move rows</legend>
<input type="button" value=" « " onclick="moveRows(destTable,sourceTable)" />
<input type="button" value=" » " onclick="moveRows(sourceTable,destTable)" />
</fieldset>
</form>
<table class="sorted" id="d" cellspacing="0" cellpadding="0" style="margin-right:0px">
<thead>
<tr>
<th id="did"><span>ID</span></th>
<th id="dname"><span>Name</span></th>
<th id="dbirth"><span>Administrator</span></th>
</tr>
</thead>
<tbody>
<tr>
<td axis="number" headers="did">4</td>
<td axis="string" headers="dname">title 2</td>
<td axis="date" headers="dbirth" title="Sales">Sales</td>
</tr>
</tbody>
</table>
</div>
<!--
group 2
--------------------------------------------------------------------------------------------- -->
<div class="content" style="clear:both;font-size:20px;">
<br><br>
<span>Manager </span></div>
<div class="content" style="font-size:17px; height:200px; width:78%; border:1px solid black;">
<table class="sorted" id="s2" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="sid"><span>ID</span></th>
<th id="sname"><span>Name</span></th>
<th id="sbirth"><span>Department</span></th>
</tr>
</thead>
<tbody>
<tr>
<td axis="number" headers="sid">1</td>
<td axis="string" headers="sname">John</td>
<td axis="date" headers="sbirth" title="IT">IT</td>
</tr>
<tr>
<td axis="number" headers="sid">2</td>
<td axis="string" headers="sname">David</td>
<td axis="date" headers="sbirth" title="AC">AC</td>
</tr>
<tr>
<td axis="number" headers="sid">3</td>
<td axis="string" headers="sname">Peter</td>
<td axis="date" headers="sbirth" title="Personnel">Personnel</td>
</tr>
</tbody>
</table>
<form id="tabletool" action="#" method="get">
<fieldset>
<legend>Move rows</legend>
<input type="button" value=" « " onclick="moveRows(destTable2,sourceTable2)" />
<input type="button" value=" » " onclick="moveRows(sourceTable2,destTable2)" />
</fieldset>
</form>
<table class="sorted" id="d2" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="did"><span>ID</span></th>
<th id="dname"><span>Name</span></th>
<th id="dbirth"><span>Manager</span></th>
</tr>
</thead>
<tbody>
<tr>
<td axis="number" headers="did">4</td>
<td axis="string" headers="dname">title 2</td>
<td axis="date" headers="dbirth" title="Sales">Sales</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言