动态更改jquery

本文关键字:jquery 动态 | 更新日期: 2023-09-27 18:19:47

我正在将数据从"table_source"移动到"table_dest",但"table_ssource"是使用中继器创建的,并且正在正确创建动态表id。但是,我需要让id为"table_ssourceX"的元素在jquery函数更改中进行更改(即,table_source0变为table_source1)。我只是在学习jquery,知道这是hello-world语句,但这里是:

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;

  }

动态更改jquery

我不确定你是只有两个表还是多个表,也不确定你要移到哪个表,但我做了一次未经测试的尝试。

首先,你应该整理你的中继器,不要动态创建它

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

让我知道你进展如何。

相关文章: