资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
发个自己写的表格操作类(添加，删除，排序，上移，下移)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin:3px}</style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%0D%0Avar%20mytable%3Dnull%2Cmytable2%3Dnull%3B%20%0D%0A%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0Amytable%3Dnew%20CTable(%22tbl%22%2C10)%3B%20%0D%0Amytable2%3Dnew%20CTable(%22tbl2%22%2C6)%3B%20%0D%0A%7D%20%0D%0A%0D%0AArray.prototype.each%3Dfunction(f)%7Bfor(var%20i%3D0%3Bi%3Cthis.length%3Bi%2B%2B)%20f(this%5Bi%5D%2Ci%2Cthis)%7D%20%0D%0A%0D%0Afunction%20%24A(arrayLike)%7B%20%0D%0Afor(var%20i%3D0%2Cret%3D%5B%5D%3Bi%3CarrayLike.length%3Bi%2B%2B)%20ret.push(arrayLike%5Bi%5D)%3B%20%0D%0Areturn%20ret%20%0D%0A%7D%20%0D%0A%0D%0AFunction.prototype.bind%20%3D%20function()%20%7B%20%0D%0A%20%20var%20__method%20%3D%20this%2C%20args%20%3D%20%24A(arguments)%2C%20object%20%3D%20args.shift()%3B%20%0D%0A%20%20return%20function()%20%7B%20%0D%0A%20%20%20%20return%20__method.apply(object%2C%20args.concat(%24A(arguments)))%3B%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Afunction%20CTable(id%2Crows)%7B%20%0D%0Athis.tbl%3Dtypeof(id)%3D%3D%22string%22%3Fdocument.getElementById(id)%3Aid%3B%20%20%0D%0Aif%20(rows%20%26%26%20%2F%5E%5Cd%2B%24%2F.test(rows))%20this.addrows(rows)%20%0D%0A%7D%20%0D%0A%0D%0ACTable.prototype%3D%7B%20%0D%0Aaddrows%3Afunction(n)%7B%20%20%20%20%20%20%20%20%20%20%2F%2F%E9%9A%8F%E6%9C%BA%E6%B7%BB%E5%8A%A0n%E4%B8%AAtr%20%0D%0Anew%20Array(n).each(this.add.bind(this))%20%0D%0A%7D%2C%20%0D%0Aadd%3Afunction()%7B%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E6%B7%BB%E5%8A%A01%E4%B8%AAtr%20%0D%0Avar%20self%3Dthis%3B%20%0D%0Avar%20tr%20%3D%20self.tbl.insertRow(-1)%2Ctd1%3D%20tr.insertCell(-1)%2Ctd2%3D%20tr.insertCell(-1)%2Ctd3%3D%20tr.insertCell(-1)%3B%20%0D%0Avar%20chkbox%3Ddocument.createElement(%22INPUT%22)%20%0D%0Achkbox.type%3D%22checkbox%22%20%0D%0Achkbox.onclick%3Dself.highlight.bind(self)%20%0D%0Atd1.appendChild(chkbox)%20%0D%0Atd1.setAttribute(%22width%22%2C%2235%22)%20%0D%0Atd2.innerHTML%3DMath.ceil(Math.random()*99)%20%0D%0Atd3.innerHTML%3DMath.ceil(Math.random()*99)%20%0D%0A%7D%2C%20%0D%0Adel%3Afunction()%7B%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E5%88%A0%E9%99%A4%E6%89%80%E9%80%89tr%20%0D%0Avar%20self%3Dthis%20%0D%0A%24A(self.tbl.rows).each(function(tr)%7Bif%20(self.getChkBox(tr).checked)%20tr.parentNode.removeChild(tr)%7D)%20%0D%0A%7D%2C%20%0D%0Aup%3Afunction()%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E4%B8%8A%E7%A7%BB%E6%89%80%E9%80%89tr%20%0D%0Avar%20self%3Dthis%20%0D%0Avar%20upOne%3Dfunction(tr)%7B%20%20%20%20%20%20%20%20%20%20%2F%2F%E4%B8%8A%E7%A7%BB1%E4%B8%AAtr%20%0D%0Aif%20(tr.rowIndex%3E0)%7B%20%0D%0Aself.swapTr(tr%2Cself.tbl.rows%5Btr.rowIndex-1%5D)%20%0D%0Aself.getChkBox(tr).checked%3Dtrue%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20arr%3D%24A(self.tbl.rows).reverse()%20%0D%0Aif%20(arr.length%3E0%20%26%26%20self.getChkBox(arr%5Barr.length-1%5D).checked)%7B%20%0D%0Afor(var%20i%3Darr.length-1%3Bi%3E%3D0%3Bi--)%7B%20%0D%0Aif%20(self.getChkBox(arr%5Bi%5D).checked)%7B%20%0D%0Aarr.pop()%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%7Delse%7B%20%0D%0Abreak%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aarr.reverse().each(function(tr)%7Bif%20(self.getChkBox(tr).checked)%20upOne(tr)%7D)%3B%20%0D%0A%7D%2C%20%0D%0Adown%3Afunction()%7B%20%0D%0Avar%20self%3Dthis%20%0D%0Avar%20downOne%3Dfunction(tr)%7B%20%20%20%20%20%20%20%0D%0Aif%20(tr.rowIndex%3Cself.tbl.rows.length-1)%20%20%7B%20%0D%0Aself.swapTr(tr%2Cself.tbl.rows%5Btr.rowIndex%2B1%5D)%3B%20%0D%0Aself.getChkBox(tr).checked%3Dtrue%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20arr%3D%24A(self.tbl.rows)%20%0D%0A%0D%0Aif%20(arr.length%3E0%20%26%26%20self.getChkBox(arr%5Barr.length-1%5D).checked)%7B%20%0D%0Afor(var%20i%3Darr.length-1%3Bi%3E%3D0%3Bi--)%7B%20%0D%0Aif%20(self.getChkBox(arr%5Bi%5D).checked)%7B%20%0D%0Aarr.pop()%20%0D%0A%7Delse%7B%20%0D%0Abreak%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aarr.reverse().each(function(tr)%7Bif%20(self.getChkBox(tr).checked)%20downOne(tr)%7D)%3B%20%0D%0A%7D%2C%20%0D%0Asort%3Afunction()%7B%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E6%8E%92%E5%BA%8F%20%20%20%0D%0Avar%20self%3Dthis%2Corder%3Darguments%5B0%5D%3B%20%0D%0Avar%20sortBy%3Dfunction(a%2Cb)%7B%20%0D%0Aif%20(typeof(order)%3D%3D%22number%22)%7B%20%20%2F%2F%E6%95%B0%E5%AD%97%2C%E5%88%99%E6%8C%89%E6%95%B0%E5%AD%97%E6%8C%87%E7%A4%BA%E7%9A%84%E5%88%97%E6%8E%92%E5%BA%8F%20%0D%0Areturn%20Number(a.cells%5Border%5D.innerHTML)%3E%3DNumber(b.cells%5Border%5D.innerHTML)%3F1%3A-1%3B%20%20%20%2F%2F%E8%BD%AC%E5%8C%96%E4%B8%BA%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B%E6%AF%94%E8%BE%83%E5%A4%A7%E5%B0%8F%20%0D%0A%7Delse%20if%20(typeof(order)%3D%3D%22function%22)%7B%20%20%20%20%20%2F%2F%E4%B8%BA%E7%A8%8B%E5%BA%8F%2C%E6%8C%89%20%E7%A8%8B%E5%BA%8F%E7%9A%84%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E6%8E%92%E5%BA%8F%20%0D%0Areturn%20order(a%2Cb)%3B%20%0D%0A%7Delse%7B%20%0D%0Areturn%201%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%24A(self.tbl.rows).sort(sortBy).each(function(x)%7B%20%0D%0Avar%20checkStatus%3Dself.getChkBox(x).checked%3B%20%0D%0Aself.tbl.firstChild.appendChild(x)%3B%20%0D%0Aif%20(checkStatus)%20self.getChkBox(x).checked%3DcheckStatus%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%2C%20%0D%0Arnd%3Afunction()%7B%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E9%9A%8F%E5%8D%B3%E9%80%89%E6%8B%A9%E5%87%A0%E8%A1%8Ctr%20%0D%0Avar%20self%3Dthis%2Cselmax%3D0%2Ctbl%3Dself.tbl%3B%20%0D%0Aif%20(tbl.rows.length)%7B%20%0D%0A%20selmax%3DMath.max(Math.ceil(tbl.rows.length%2F4)%2C1)%3B%20%20%2F%2F%E9%80%89%E6%8B%A9%E7%9A%84%E8%A1%8C%E6%95%B0%E4%B8%8D%E8%B6%85%E8%BF%87tr%E6%95%B0%E7%9A%841%2F4%20%0D%0A%20%24A(tbl.rows).each(function(x)%7B%20%0D%0Aself.getChkBox(x).checked%3Dfalse%3B%20%0D%0Aself.restoreBgColor(x)%20%0D%0A%7D)%20%0D%0A%7Delse%7B%20%0D%0Areturn%20alert(%22%E6%97%A0%E6%95%B0%E6%8D%AE%E5%8F%AF%E4%BB%A5%E9%80%89%22)%20%0D%0A%7D%20%0D%0Anew%20Array(selmax).each(function()%7B%20%0D%0Avar%20tr%3Dtbl.rows%5BMath.floor(Math.random()*tbl.rows.length)%5D%20%0D%0Aself.getChkBox(tr).checked%3Dtrue%3B%20%0D%0Aself.highlight(%7Btarget%3Aself.getChkBox(tr)%7D)%20%0D%0A%7D)%20%0D%0A%7D%2C%20%0D%0Ahighlight%3Afunction()%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AEtr%E7%9A%84%E8%83%8C%E6%99%AF%E8%89%B2%20%0D%0Avar%20self%3Dthis%3B%20%0D%0Avar%20evt%3Darguments%5B0%5D%20%7C%7C%20window.event%20%0D%0Avar%20chkbox%3Devt.srcElement%20%7C%7C%20evt.target%20%0D%0Avar%20tr%3Dchkbox.parentNode.parentNode%20%0D%0Achkbox.checked%3Fself.setBgColor(tr)%3Aself.restoreBgColor(tr)%20%0D%0A%7D%2C%20%0D%0AswapTr%3Afunction(tr1%2Ctr2)%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E4%BA%A4%E6%8D%A2tr1%E5%92%8Ctr2%E7%9A%84%E4%BD%8D%E7%BD%AE%20%0D%0Avar%20target%3D(tr1.rowIndex%3Ctr2.rowIndex)%3Ftr2.nextSibling%3Atr2%3B%20%0D%0Avar%20tBody%3Dtr1.parentNode%20%0D%0AtBody.replaceChild(tr2%2Ctr1)%3B%20%0D%0A%20%20%20%20tBody.insertBefore(tr1%2Ctarget)%3B%20%0D%0A%7D%2C%20%0D%0AgetChkBox%3Afunction(tr)%7B%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E4%BB%8Etr%E5%BE%97%E5%88%B0%20checkbox%E5%AF%B9%E8%B1%A1%20%0D%0Areturn%20tr.cells%5B0%5D.firstChild%20%0D%0A%7D%2C%20%0D%0ArestoreBgColor%3Afunction(tr)%7B%20%20%20%20%20%20%20%20%20%20%20%0D%0Atr.style.backgroundColor%3D%22%23ffffff%22%20%20%0D%0A%7D%2C%20%0D%0AsetBgColor%3Afunction(tr)%7B%20%0D%0Atr.style.backgroundColor%3D%22%23c0c0c0%22%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20f(a%2Cb)%7B%20%0D%0Avar%20sumRow%3Dfunction(row)%7Breturn%20Number(row.cells%5B1%5D.innerHTML)%2BNumber(row.cells%5B2%5D.innerHTML)%7D%3B%20%0D%0Areturn%20sumRow(a)%3EsumRow(b)%3F1%3A-1%3B%20%0D%0A%7D%20%0D%0A%0D%0A%3C%2Fscript%3E"> </head> <body> <button onClick="javascript:mytable.rnd()">随机选择行</button> <button onClick="javascript:mytable.add()">添加一行</button> <button onClick="javascript:mytable.del()">删除选定行</button> <button onClick="javascript:mytable.up()">上移选定行</button> <button onClick="javascript:mytable.down()">下移选定行</button> <button onClick="javascript:mytable.sort(1)">按第一列数字排序</button> <button onClick="javascript:mytable.sort(f)">按每行数据的和排序</button> <table width=100%> <tr> <td valign="top"><table border id="tbl" width="80%"></table></td> <td valign="top"><table border id="tbl2" width="80%"></table></td> </tr> </table> <button onClick="javascript:mytable2.rnd()">随机选择行</button> <button onClick="javascript:mytable2.add()">添加一行</button> <button onClick="javascript:mytable2.del()">删除选定行</button> <button onClick="javascript:mytable2.up()">上移选定行</button> <button onClick="javascript:mytable2.down()">下移选定行</button> <button onClick="javascript:mytable2.sort(2)">按第二列数字排序</button> <button onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程