jQuery实现行上下移动并删除(顺序不变)
?
HTML代码如下：
?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery实现行上下移动并删除(顺序不变)</title><style>.rowNum {width:10px;text-align:center;border:none}.btn {width:10px;text-align:center}td {padding-left:5px;padding-right:5px;padding-top:3px;padding-bottom:3px}</style></head><body><table id="tbHide" style="display:none"><tr id="trHide"></tr></table><table border="1" id="tbShow"><thead><tr><th>No</th><th>Name</th><th colspan="3">操作</th><th>Id</th></tr></thead><tbody><tr><td>1</td><td>First</td><td><input type="button" name="btnUp" value="↑" onclick="move(this)"></td><td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td><td><input type="button" name="btnDel" value="×" onclick="move(this)"></td><td><input type="text" name="rowNum" value="1" readonly name="btnUp" value="↑" onclick="move(this)"></td><td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td><td><input type="button" name="btnDel" value="×" onclick="move(this)"></td><td><input type="text" name="rowNum" value="2" readonly name="btnUp" value="↑" onclick="move(this)"></td><td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td><td><input type="button" name="btnDel" value="×" onclick="move(this)"></td><td><input type="text" name="rowNum" value="3" readonly name="btnUp" value="↑" onclick="move(this)"></td><td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td><td><input type="button" name="btnDel" value="×" onclick="move(this)"></td><td><input type="text" name="rowNum" value="4" readonly name="btnUp" value="↑" onclick="move(this)"></td><td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td><td><input type="button" name="btnDel" value="×" onclick="move(this)"></td><td><input type="text" name="rowNum" value="5" readonly name="code"><script>var tempSelector = "td:last-child input[name=rowNum]";// Button点击function move(obj){var btnType = $(obj).attr("name");var currRow = $(obj).parent().parent();if(btnType == "btnUp"){moveUpCommand(currRow);}else if(btnType == "btnDown"){moveDownCommand(currRow);}else if(btnType == "btnDel"){delRowOperate(currRow);}} // move up function moveUpCommand(currRow){ var firstTr = $("#tbShow tbody tr:first-child"); var firstTrNo = Number($(firstTr).find(tempSelector).val()); var currRowNo = Number($(currRow).find(tempSelector).val()); if(currRowNo == firstTrNo){ return; }else{ moveUpOperate(currRow); } } // move down function moveDownCommand(currRow){ var lastTr = $("#tbShow tbody tr:last-child"); var lastTrNo = Number($(lastTr).find(tempSelector).val()); var currRowNo = Number($(currRow).find(tempSelector).val()); if(currRowNo == lastTrNo){ return; }else{ moveDownOperate(currRow); } } // delete row function delRowOperate(currRow){ $(currRow).nextAll().each(function(){ $(this).find(tempSelector).val(Number($(this).find(tempSelector).val())-1); }); $(currRow).remove(); } // move up operate function moveUpOperate(currRow){ var tempRow = $("#trHide").html($(currRow).html()); var prevRow = $(currRow).prev(); var prevRowNo = $(prevRow).find(tempSelector).val(); var tempRowNo = $(tempRow).find(tempSelector).val(); // current row $(prevRow).find(tempSelector).val(Number(prevRowNo)+1); $(currRow).html("").append($(prevRow).html()); // previous row $(tempRow).find(tempSelector).val(Number(tempRowNo)-1); $(prevRow).html("").append($(tempRow).html()); $("#trHide").html(""); } // move down operate function moveDownOperate(currRow){ var tempRow = $("#trHide").html($(currRow).html()); var nextRow = $(currRow).next(); var nextRowNo = $(nextRow).find(tempSelector).val(); var tempRowNo = $(tempRow).find(tempSelector).val(); // current row $(nextRow).find(tempSelector).val(Number(nextRowNo)-1); $(currRow).html("").append($(nextRow).html()); // next row $(tempRow).find(tempSelector).val(Number(tempRowNo)+1); $(nextRow).html("").append($(tempRow).html()); $("#trHide").html(""); } </script>?
?