動態更改jquery

Question

我正在將數據從'table_source'移動到'table_dest'，但'table_source'使用中繼器創建並正確創建動態表ID。但是，我需要使id =「table_sourceX」的元素在jquery函數更改中更改（即table_source0變爲table_source1）。我只是學習jQuery和知道這是世界你好聲明的東西，但在這裏有雲：

jQuery的

//moves from source to destination table    
      //$("#table_source").on('click', 'img.move-row', function (e) { 
      var tableName = "#table_source" + repCounter.ToString() 
      $(tableName).click(function (e) {     
       alert(tableName) 
       var tr = $(this).closest("tr").remove().clone(); 
       tr.find("img.move-row") 
     .attr("src", "remove_image_path.jpg") 
     .attr("alt", "Remove"); 
       $("#table_dest tbody").append(tr); 
      }); 

//moves from destination back to source 
       $("#table_dest").on('click', 'img.move-row', function (e) {     
        var tr = $(this).closest("tr").remove().clone(); 
        tr.find("img.move-row") 
      .attr("src", "images/add.png") 
      .attr("alt", "Move"); 
        $("#table_source tbody").append(tr); 
       }); 

C＃

public int repCounter= 0; 
     public string renderItem(RepeaterItem item) 
     { 
      object DI = item.DataItem; 

      string MyVal = DataBinder.Eval(DI, "FirstName").ToString(); 



      string html = String.Empty; 

      html = "<table id=" + "table_source" + repCounter.ToString() + " style=border: 1px solid black;border-collapse: separate;" + 
    "border-spacing: 10px 50px;>" + 
    "<tr>" + 
    "<td>" + MyVal + "</td><td><img alt='Move' class='move-row'id='arrowRotate' src='images/add.png' data-swap='images/minussymbol.jpg'/></td>" + 
    "</tr>" + 
    "</table>"; 

      repCounter++; 

      return html; 


    } 

Answer 1

我不知道，如果你只有兩個表或多個表，你試圖移動到哪個表，但我做了一個未經測試的嘗試。

首先你應該清理你的中繼器，不要動態創建它。

<asp:Repeater ID="rptTable" runat="server"> 
<ItemTemplate> 
    <table data-id="<%# Container.ItemIndex %>" class="special-table" style="border: 1px solid black;border-collapse: separate; border-spacing: 10px 50px;"> 
     <tr> 
      <td> 
       <%#DataBinder.Eval(Container,"DataItem.FirstName") %> 
      </td> 
      <td> 
       <img alt="Move" class="move-row" id="arrowRotate" src="images/add.png" data-swap="images/minussymbol.jpg" /> 
      </td> 
     </tr> 
    </table> 
</ItemTemplate> 

那就試試這個腳本。我毫不懷疑，它可能需要與選擇器稍微調整，但不應太遠。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.special-table tr').click(function() { 
     var row = $(this); 

     var thisTable = row.closest('table'); 

     //all tables - should only be two for this 
     var tables = $('.special-table'); 

     var otherTables = $.grep(tables, function (a) { 
      return a.data('id') !== thisTable.data('id'); 
     }); 

     var otherTable = $(otherTables.first()); 

     row.appendTo(otherTable); 
    }); 
}); 

讓我知道你上車。