移动表行

Question

我有这样的桌子，我想在这些行上下移动点击这些箭头可以有人帮助我......

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();

Answer 1

我们必须使用 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)  +  ")"));
    }
}

Working DEMO

<强>来源：

1. Insert After jQuery
2. Insert Before jQuery

Answer 2

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;

    }

}

///////////////////////////结束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();