html table tr td 上下移动行实例源代码
2008-08-26 15:29
435 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="JavaScript"> var tr; function select(obj){ if(obj.tagName=='TD'){ for(i=0;i<t1.rows.length;i++){ t1.rows[i].bgColor=''; } tr=obj.parentElement; tr.bgColor='red'; } } function test(n){ if(!tr){ alert('请选择一行'); return; } i=tr.sectionRowIndex+n; if(i>=0 && i<t1.rows.length){ var origin = document.getElementsByName('rownum'+tr.sectionRowIndex)[0]; var target = document.getElementsByName('rownum'+i)[0]; var tmp = origin.value; origin.value=target.value; target.value=tmp; tr.swapNode(t1.rows[i]); } } function showRowNum(){ alert("rownum0="+document.getElementsByName("rownum0")[0].value+"/nrownum1="+document.getElementsByName("rownum1")[0].value+"/nrownum2="+document.getElementsByName("rownum2")[0].value+"/nrownum3="+document.getElementsByName("rownum3")[0].value+"/nrownum4="+document.getElementsByName("rownum4")[0].value); } </script> </head> <body> <table id="t1" width="100" border onClick="select(event.srcElement);"> <tr><td>row1</td><input type="hidden" name="rownum0" value="10"></tr> <tr><td>row2</td><input type="hidden" name="rownum1" value="20"></tr> <tr><td>row3</td><input type="hidden" name="rownum2" value="30"></tr> <tr><td>row4</td><input type="hidden" name="rownum3" value="40"></tr> <tr><td>row5</td><input type="hidden" name="rownum4" value="50"></tr> </table> <input type="button" value="Up" onClick="test(-1)"> <input type="button" value="Down" onClick="test(1)"> <input type="button" value="showRowNum" onClick="showRowNum()"> </body> </html> |
相关文章推荐
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- js 上下键控制table里tr的背景上下移动选中效果
- HTML基础 table中的tr中的td标签中的valign属性设置文本靠上,中间,靠下
- html table tr td br 什么意思 缩写
- html<table><th><tr><td><caption><thead><tbody><tfoot>属性总结
- 关于html中table表格tr,td的高度和宽度
- html页面中关于一个table表格中设置上下2个td宽度一致的问题
- html table tr td br 什么意思 缩写
- table的数据行tr上下移动
- 关于html中table表格tr,td的高度和宽度
- <html>table、tr/td、thead、tbody、tfoot、col、colgroup
- js中获取 table节点各tr及td的内容简单实例
- HTML——表格table标签,tr或者td
- 关于html中table表格tr,td的高度和宽度
- vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th
- jquery 控制table tr 上下移动
- HTML中表格元素TABLE,TR,TD及属性的语法
- jQuery实现table中的tr上下移动并保持序号不变
- html table tr td br 什么意思 缩写
- Table中对tr的上下拖拽移动