javascript - 移动表行

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

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

Working DEMO

来源:

1. Insert After jQuery
2. Insert Before jQuery