Javascript 移动表行

我的桌子是这样的，我想上下移动这些行，点击这些箭头，有人能帮我吗

function MoveRowDown(tableId, index)
{
    var rows = $("#" + tableId + " tr");

    rows.eq(index).insertAfter(rows.eq(index + 1));
}

function MoveRowUp(tableId, index)
{           
    var rows = $("#" + tableId + " tr");

    rows.eq(index).insertBefore(rows.eq(index - 1));
}


int ItemSetupID = EBusiness.GetCommonSetupID(this.Data.WFID, EBusiness.CommonSetupID.ItemSetup);

MModules objItemSetupModules = new MModules();

objItemSetupModules.LoadModules(ItemSetupID);

StringBuilder ret = new StringBuilder(4000);


ret.Append("<table class=\"box-table-a\"><tr><td><img id=\"left\" src=\"../../images/downarrow.png\" onclick=\"MoveRowDown(tableId,index);\"></td></tr><tr><td>");

ret.Append("<table id=\"tableId\" class=\"box-table-a\"><tr><th>Items</th></tr>");
int index = 0;

foreach (MModule module in objItemSetupModules.Modules)
{
    ret.Append("<tr><td><input type=\"hidden\" name=\"Items" + module.ModuleID + "\" id=\"Items" + module.ModuleID + "\"  />");

    ret.Append("<tr><td><input type=\"hidden\" name=\"index" + index + "\" id=\"index" + index + "\" />");

    ret.Append("<a href=\"#\" class=\"lnkShowFilter\" onclick=\"$('#index" + index + "').val('#index" + index + "'); $('.lnkShowFilter').css('color', '#000000');this.style.color='#FF0000';ShowFilterSaleMargin('" + module.TableName + "', '" + module.Title + "', 'divFilter" + module.ModuleID + "')\">");
    ret.Append("" + module.Title + "</a> ");
    ret.Append("<input type=\"hidden\" id=\"hidShowFilter" + module.Title + "\" value=\"false\" />");
    ret.Append("<div id=\"divFilter" + module.ModuleID + "\" style=\"text-align:left;border:1px SOLID #333333;background-color:White;display:none;position:absolute;\">");
    ret.Append("<div id=\"sdivFilter" + module.ModuleID + "\" style=\"border:1px SOLID #EEEEEE;background-color:#AAAABB; width:150px;height:100px;overflow-y:auto;\"></div>");
    ret.Append("<input type=\"button\" value=\" OK \" class=\"button\" onclick=\"$('#' + openedDivID).hide();GetItemData('" + module.ModuleID + "', '" + module.Title + "');\" />");
    ret.Append("</div></td></tr>");
    index++;
}

ret.Append("</table></td><td>");
ret.Append("<table class=\"box-table-a\"><tr><th>Data</th></tr>");

foreach (MModule module in objItemSetupModules.Modules)
{
    ret.Append("<tr id=\"tdModule" + module.ModuleID + "\"><td ></td></tr>");
}

ret.Append("</table></td></tr><tr><td><img id=\"left\" src=\"../../images/uparrow.png\" onclick=\"MoveRowUp(tableId, index);\"></td></tr></table>");
this.Output = ret.ToString();

函数MoveRowDown（表ID，索引）
{
变量行=$（“#”+tableId+“tr”）；
rows.eq（index）.insertAfter（rows.eq（index+1））；
}
函数MoveRowUp（表ID、索引）
{           
变量行=$（“#”+tableId+“tr”）；
rows.eq（index）.insertBefore（rows.eq（index-1））；
}
int ItemSetupID=EBusiness.GetCommonSetupID（this.Data.WFID，EBusiness.CommonSetupID.ItemSetup）；
MModules objItemSetupModules=新MModules（）；
objItemSetupModules.LoadModules（ItemSetupID）；
StringBuilder ret=新StringBuilder（4000）；
ret.Append（“”）；
重新追加（“项目”）；
int指数=0；
foreach（objItemSetupModules.Modules中的MModule模块）
{
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
索引++；
}
ret.Append（“”）；
ret.Append（“数据”）；
foreach（objItemSetupModules.Modules中的MModule模块）
{
ret.Append（“”）；
}
ret.Append（“”）；
this.Output=ret.ToString（）；

我们必须使用jQuery的insertBefore和insertAfter方法分别在dom元素之前和之后插入

示例代码如下所示：

if(e.target.innerHTML == "Up") {
    if(index != 0) {
        currRow.insertBefore($("tr:eq(" + (index-1) +  ")"));
    }
} else if(e.target.innerHTML == "Down") {
    if(index != (totalTrs-1)) {
        currRow.insertAfter($("tr:eq(" + (index+1)  +  ")"));
    }
}

来源：

JavaScript上下移动HTML表行：工作代码

 function MoveRowDown(tableId)
 {

    var index=parseInt(document.getElementById("HiddRowindex").value);

    var rows = $("#" + tableId + " tr");

    table= document.getElementById(tableId);

    rowCount = table.rows.length;

    if(index+1<rowCount)

    {
        rows.eq(parseInt(index)).insertAfter(rows.eq(index + 1));

        index=(index+1);

        document.getElementById("HiddRowindex").value=index;

    }
}


function MoveRowUp(tableId)

{   

   var index=parseInt(document.getElementById("HiddRowindex").value);

    var rows = $("#" + tableId + " tr");

    table= document.getElementById(tableId);

    rowCount = table.rows.length;

    if(index-1>0)

    {

    rows.eq(index).insertBefore(rows.eq(index - 1));

    index=(index-1);

    document.getElementById("HiddRowindex").value=index;

    }

}

函数MoveRowDown（tableId）
{
var index=parseInt（document.getElementById（“HiddRowindex”）.value）；
变量行=$（“#”+tableId+“tr”）；
table=document.getElementById（tableId）；
rowCount=table.rows.length；
如果（索引+10）
{
rows.eq（index）.insertBefore（rows.eq（index-1））；
指数=（指数-1）；
document.getElementById（“HiddRowindex”）。值=索引；
}
}

///////////////////////////结束JavaScript///////////////////////////////

        int ItemSetupID = EBusiness.GetCommonSetupID(this.Data.WFID, 

        EBusiness.CommonSetupID.ItemSetup);


        MModules objItemSetupModules = new MModules();

        objItemSetupModules.LoadModules(ItemSetupID);

        StringBuilder ret = new StringBuilder(4000);

        ret.Append("<table class=\"box-table-a\"><tr><td><img id=\"left\" src=\"../../images/downarrow.png\" onclick=\"MoveRowDown('tableId');\"></td></tr><tr><td>");

        ret.Append("<table id=\"tableId\" class=\"box-table-a\"><tr><th>Items</th><th>Data</th></tr><input type=\"hidden\" name=\"HiddRowindex\" id=\"HiddRowindex\" value=\"\" />");
        int index = 1;

        foreach (MModule module in objItemSetupModules.Modules)
        {
            ret.Append("<tr><td><input type=\"hidden\" name=\"Items" + module.ModuleID + "\" id=\"Items" + module.ModuleID + "\"  />");
            ret.Append("<a href=\"#\" class=\"lnkShowFilter\" onclick=\"$('#HiddRowindex').val($(this).closest('td').parent()[0].sectionRowIndex); $('.lnkShowFilter').css('color', '#000000');this.style.color='#FF0000';ShowFilterSaleMargin('" + module.TableName + "', '" + module.Title + "', 'divFilter" + module.ModuleID + "')\">");
            ret.Append("" + module.Title + "</a> ");
            ret.Append("<input type=\"hidden\" id=\"hidShowFilter" + module.Title + "\" value=\"false\" />");
            ret.Append("<div id=\"divFilter" + module.ModuleID + "\" style=\"text-align:left;border:1px SOLID #333333;background-color:White;display:none;position:absolute;\">");
            ret.Append("<div id=\"sdivFilter" + module.ModuleID + "\" style=\"border:1px SOLID #EEEEEE;background-color:#AAAABB; width:150px;height:100px;overflow-y:auto;\"></div>");
            ret.Append("<input type=\"button\" value=\" OK \" class=\"button\" onclick=\"$('#' + openedDivID).hide();GetItemData('" + module.ModuleID + "', '" + module.Title + "');\" />");
            ret.Append("</div></td>");
            ret.Append("<td id=\"tdModule" + module.ModuleID + "\"></td>");
            ret.Append("</tr>");
            index++;
        }
        ret.Append("</table></td>");            
        ret.Append("</tr><tr><td><img id=\"left\" src=\"../../images/uparrow.png\" onclick=\"MoveRowUp('tableId');\"></td></tr></table>");
        this.Output = ret.ToString();

///////////////////////////代码////////////////////////////////////////

        int ItemSetupID = EBusiness.GetCommonSetupID(this.Data.WFID, 

        EBusiness.CommonSetupID.ItemSetup);


        MModules objItemSetupModules = new MModules();

        objItemSetupModules.LoadModules(ItemSetupID);

        StringBuilder ret = new StringBuilder(4000);

        ret.Append("<table class=\"box-table-a\"><tr><td><img id=\"left\" src=\"../../images/downarrow.png\" onclick=\"MoveRowDown('tableId');\"></td></tr><tr><td>");

        ret.Append("<table id=\"tableId\" class=\"box-table-a\"><tr><th>Items</th><th>Data</th></tr><input type=\"hidden\" name=\"HiddRowindex\" id=\"HiddRowindex\" value=\"\" />");
        int index = 1;

        foreach (MModule module in objItemSetupModules.Modules)
        {
            ret.Append("<tr><td><input type=\"hidden\" name=\"Items" + module.ModuleID + "\" id=\"Items" + module.ModuleID + "\"  />");
            ret.Append("<a href=\"#\" class=\"lnkShowFilter\" onclick=\"$('#HiddRowindex').val($(this).closest('td').parent()[0].sectionRowIndex); $('.lnkShowFilter').css('color', '#000000');this.style.color='#FF0000';ShowFilterSaleMargin('" + module.TableName + "', '" + module.Title + "', 'divFilter" + module.ModuleID + "')\">");
            ret.Append("" + module.Title + "</a> ");
            ret.Append("<input type=\"hidden\" id=\"hidShowFilter" + module.Title + "\" value=\"false\" />");
            ret.Append("<div id=\"divFilter" + module.ModuleID + "\" style=\"text-align:left;border:1px SOLID #333333;background-color:White;display:none;position:absolute;\">");
            ret.Append("<div id=\"sdivFilter" + module.ModuleID + "\" style=\"border:1px SOLID #EEEEEE;background-color:#AAAABB; width:150px;height:100px;overflow-y:auto;\"></div>");
            ret.Append("<input type=\"button\" value=\" OK \" class=\"button\" onclick=\"$('#' + openedDivID).hide();GetItemData('" + module.ModuleID + "', '" + module.Title + "');\" />");
            ret.Append("</div></td>");
            ret.Append("<td id=\"tdModule" + module.ModuleID + "\"></td>");
            ret.Append("</tr>");
            index++;
        }
        ret.Append("</table></td>");            
        ret.Append("</tr><tr><td><img id=\"left\" src=\"../../images/uparrow.png\" onclick=\"MoveRowUp('tableId');\"></td></tr></table>");
        this.Output = ret.ToString();

int ItemSetupID=EBusiness.GetCommonSetupID（this.Data.WFID，
EBusiness.CommonSetupID.ItemSetup）；
MModules objItemSetupModules=新MModules（）；
objItemSetupModules.LoadModules（ItemSetupID）；
StringBuilder ret=新StringBuilder（4000）；
ret.Append（“”）；
ret.Append（“项目数据”）；
int指数=1；
foreach（objItemSetupModules.Modules中的MModule模块）
{
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
ret.Append（“”）；
索引++；
}
ret.Append（“”）；
ret.Append（“”）；
this.Output=ret.ToString（）；

我们有上下按钮吗。它应该如何工作，请详细说明问题。我在顶部和底部都有箭头，我需要在单击这些箭头时移动这些行。您是否尝试过我的解决方案。是的。。Thanx Basha，它现在正在工作，仍然存在一些问题，但我将管理函数MoveRowDown（tableId）{//debugger；var index=parseInt（document.getElementById（“HiddRowindex”）.value）；var rows=$（“#”+tableId+“tr”）；table=document.getElementById（tableId）；rowCount=table.rows.length；if（index+1function MoveRowUp（tableId）{//debugger；var index=parseInt（document.getElementById（“HiddRowindex”）.value）；var rows=$（“#”+tableId+“tr”）；table=document.getElementById（tableId）；rowCount=table.rows.length；if（index-1>0）{rows.eq（index）.insertBefore（rows.eq（index-1））；index=（index-1）；document.getElementById（“HiddRowindex”）.value=index；}