动态更改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); 
    }); 
}); 

让我知道你上车。