總體思路是在table外部加個div,修改div的innerHtml實現改變tr順序的效果
具體思路是
獲取當前要移動tr行的rowIndex,在table中刪除掉,然后循環table的rows,到了目標行再直接加進去,最后把整體的html賦值給div完成效果
js代碼如下
js如何實現拖拽和上下移動,//使行向上一行
function setRowUp(obj) {
if (obj.parentNode.parentNode.rowIndex != 1) {
var tab = obj.parentNode.parentNode.parentNode;
var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
java get和set方法。var nowNowIndex = obj.parentNode.parentNode.rowIndex;
tab.deleteRow(nowNowIndex);
var newHtml = "
newHtml += ("
" + tab.rows[0].innerHTML + "");for (i = 1; i < tab.rows.length; i++) {
js獲取網頁table,if (i == (nowNowIndex - 1)) {
newHtml += ("
" + nowNodeInnerHtml + "");}
newHtml += ("
" + tab.rows[i].innerHTML + "");}
table前加一個選中框,newHtml += "
";document.getElementById("divContent").innerHTML = newHtml;
}
}
//使行向下一行
element表格默認選中第一行、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;
table行選中狀態。tab.deleteRow(nowNowIndex);
var newHtml = "
newHtml += ("
" + tab.rows[0].innerHTML + "");for (i = 1; i < tab.rows.length; i++) {
if (i == (nowNowIndex + 1)) {
layui table、newHtml += ("
" + nowNodeInnerHtml + "");}
newHtml += ("
" + tab.rows[i].innerHTML + "");}
//向下可能到表格現有行數外 額外處理
idea上移一行快捷鍵?if (tab.rows.length == (nowNowIndex + 1)) {
newHtml += ("
" + nowNodeInnerHtml + "");}
newHtml += "
";document.getElementById("divContent").innerHTML = newHtml;
java跳轉到指定行?}
}
測試html代碼如下
工號 | 姓名 |
0001 | 姓名01 |
0002 | 姓名02 |
0003 | 姓名03 |
0004 | 姓名04 |
0005 | 姓名05 |
總結
以上所述是小編給大家介紹的js操作table中tr的順序實現上移下移一行的效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态