网站建设业务怎么开展,微信小程序api怎么用,中国建设基础设施总公司 网站,东莞横沥理工学校总体思路是在table外部加个div#xff0c;修改div的innerHtml实现改变tr顺序的效果
具体思路是
获取当前要移动tr行的rowIndex#xff0c;在table中删除掉#xff0c;然后循环table的rows#xff0c;到了目标行再直接加进去#xff0c;最后把整体的html赋值给div完成效果…总体思路是在table外部加个div修改div的innerHtml实现改变tr顺序的效果
具体思路是
获取当前要移动tr行的rowIndex在table中删除掉然后循环table的rows到了目标行再直接加进去最后把整体的html赋值给div完成效果
js代码如下 //使行向上一行function setRowUp(obj) {if (obj.parentNode.parentNode.rowIndex ! 1) {var tab obj.parentNode.parentNode.parentNode;var nowNodeInnerHtml obj.parentNode.parentNode.innerHTML;var nowNowIndex obj.parentNode.parentNode.rowIndex;tab.deleteRow(nowNowIndex);var newHtml table cellpadding\5\ cellspacing\0\;newHtml (TR stylefont-weight: bold; text-align: center; tab.rows[0].innerHTML /TR);for (i 1; i tab.rows.length; i ) {if (i (nowNowIndex - 1)) {newHtml (TR nowNodeInnerHtml /TR);}newHtml (TR tab.rows[i].innerHTML /TR);}newHtml /table;document.getElementById(divContent).innerHTML newHtml;}}//使行向下一行function setRowDown(obj) {if (obj.parentNode.parentNode.rowIndex ! (document.getElementById(divContent).childNodes[0].rows.length - 1)) {var tab obj.parentNode.parentNode.parentNode;var nowNodeInnerHtml obj.parentNode.parentNode.innerHTML;var nowNowIndex obj.parentNode.parentNode.rowIndex;tab.deleteRow(nowNowIndex);var newHtml table cellpadding\5\ cellspacing\0\;newHtml (TR stylefont-weight: bold; text-align: center; tab.rows[0].innerHTML /TR);for (i 1; i tab.rows.length; i ) {if (i (nowNowIndex 1)) {newHtml (TR nowNodeInnerHtml /TR);}newHtml (TR tab.rows[i].innerHTML /TR);}//向下可能到表格现有行数外 额外处理if (tab.rows.length (nowNowIndex 1)) {newHtml (TR nowNodeInnerHtml /TR);}newHtml /table;document.getElementById(divContent).innerHTML newHtml;}} 测试html代码如下 bodydiv iddivContenttable cellpadding5 cellspacing0tr stylefont-weight: bold; text-align: center;td工号/tdtd姓名/td/trtrtd0001input typebutton value↑ onclicksetRowUp(this) /input typebutton value↓ onclicksetRowDown(this) //tdtd姓名01/td/trtrtd0002input typebutton value↑ onclicksetRowUp(this) /input typebutton value↓ onclicksetRowDown(this) //tdtd姓名02/td/trtrtd0003input typebutton value↑ onclicksetRowUp(this) /input typebutton value↓ onclicksetRowDown(this) //tdtd姓名03/td/trtrtd0004input typebutton value↑ onclicksetRowUp(this) /input typebutton value↓ onclicksetRowDown(this) //tdtd姓名04/td/trtrtd0005input typebutton value↑ onclicksetRowUp(this) /input typebutton value↓ onclicksetRowDown(this) //tdtd姓名05/td/tr/table/div
/body 更多专业前端知识请上
【猿2048】www.mk2048.com
