<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">*{font-size:15px}button{margin:5px}</style>
<script type="text/javascript">
var tbl=null;  //全局对象,引用要操作的table
window.onload=function(){
tbl=document.getElementById("tbl")
attachKeybordEvent()   //添加键盘事件
new Array(8).each(add)   //先添加8个 tr
alert("快捷键:\nAlt+A,Insert键:\t添加\nAlt+D,Delete键:\t删除\nAlt+W,上箭头键:\t上移\nAlt+S,下箭头键:\t下移")
}Array.prototype.each=function(f){for(var i=0;i<this.length;i++)  f(this[i],i,this)}function getChkBox(tr){    //获取当前TR中的那个 checkbox
return tr.firstChild.firstChild
}
function $A(arrayLike){   // 转换数据 arrayLike 为数组
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);
return ret
}function swapTr(tr1,tr2){   //交换两个Tr 的位置
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
    tBody.insertBefore(tr1,target);
}function attachKeybordEvent(){   //添加键盘热键
document.onkeydown=function(){
switch ((window.event || arguments[0]).keyCode){
case 40:return down();  //  方向键的下箭头
case 38:return up();   //  方向键的上箭头
case 45:return add();   //   响应 Insert键
case 46:return del();   //   响应 Delete键
}
}
}function highlight(){                  //当选择一行或取消选择一行的时候,改变Tr的背景色
var evt=window.event || arguments[0]
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
tr.style.backgroundColor=(chkbox.checked)?"#c0c0c0":"#ffffff"
}function add(){                  //添加一行
var tr = tbl.insertRow(-1);  
    var td1= tr.insertCell(-1);
    var td2= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=highlight
td1.appendChild(chkbox)
td1.setAttribute("width","30")
td2.innerHTML=Math.ceil(Math.random()*100)
}
function del(){                 //删除选中行
$A(tbl.rows).each(function(tr){if (getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
}function up() {                 //将选中行全部都上移一格
var upOne=function(tr){           //上移单行
if (tr.rowIndex>0)  {
swapTr(tr,tbl.rows[tr.rowIndex-1])
getChkBox(tr).checked=true
}
}
var arr=$A(tbl.rows).reverse()

// 如果选中的行已经在表格的最上面了,就不必再对他们进行上移操作了。 下面这个If 语句段处理已经位于最顶上的一行或多行
if (arr.length>0 && getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (getChkBox(arr[i]).checked){
 //因为是在遍历数组的循环中删除数组元素,这里不建议直接用 arr.shift
arr.pop()           
}else{
break
}
}
}
arr.reverse().each(function(tr){if (getChkBox(tr).checked) upOne(tr)})
}function down() {         //将选中行全部都下移一格
var downOne=function(tr){       //下移单行
if (tr.rowIndex<tbl.rows.length-1)  {
swapTr(tr,tbl.rows[tr.rowIndex+1])
getChkBox(tr).checked=true
}
}
var arr=$A(tbl.rows) if (arr.length>0 && getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (getChkBox(tr).checked) downOne(tr)})
}
</script>
</head>
<body>
<table border id="tbl" width="50%"></table>
<br>本程序兼容FF1.5和ie6.0<br><hr>

<button accesskey="a" onclick="javascript:add()">添 加 一 行 (<u>A</u>)</button>
<button accesskey="d" onclick="javascript:del()">删 除 选 定 行 (<u>D</u>)</button>
<button accesskey="w" onclick="javascript:up()">上 移 选 定 行 (<u>W</u>)</button>
<button accesskey="s" onclick="javascript:down()">下 移 选 定 行 (<u>S</u>)</button>
</body>
</html>