动态更改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;
}
我不确定你是只有两个表还是多个表,也不确定你要移到哪个表,但我做了一次未经测试的尝试。
首先,你应该整理你的中继器,不要动态创建它
<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);
});
});
让我知道你进展如何。