이동 테이블 행

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

우리 전에 각각 DOM 요소 뒤에 삽입 에 insertbefore과의 jQuery insertafter 속성 방법을 사용한다.

샘플 코드는 같은 수 있습니다 :

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

위로 자바 스크립트, 아래로 움직 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; 

    } 

} 

///////////////////////////종료 자바 스크립트 ///////////////////////////////

//////////// ///////////////암호////////////////////////////////// //////

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