Jquery Sortable后如何更新多个td的Id答案

【问题标题】：How to update the Id of multiple td after Jquery SortableJquery Sortable后如何更新多个td的Id
【发布时间】：2016-06-26 12:10:50
【问题描述】：

我有一张这样的桌子

<table class="table table-bordered table-striped table-highlight"
				id="tab_logic">

			</table>

我正在向表中添加具有多列的行，如下所示

for (var i = 1; i <= num; i++) {
				
				var htm = "";
				htm += "<tbody class='editrow'> <tr class='321'><td colspan='3' align='center'><p id='addrp"+i+"'><strong>Action Button "
						+ i + " Properties</strong></p></td></tr>";
				htm += "<tr class='123'><td align='center' style='width:15%'><p id='addac"+i+"'><strong>Action</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpac"+i+"'>Action</p></td><td><input type ='text' class ='form-control' id='addiac"
						+ i
						+ "' name ='addiac"
						+ i
						+ "' placeholder='Enter Action'</td> </tr>";
				htm += "<tr class='123'><td align='center' style='width:15%'><p id='addat"+i+"'><strong>Action Text</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpat"+i+"'>Action Text</p></td><td><input type ='text' class ='form-control' id='addiat"
						+ i
						+ "' name ='addiat"
						+ i
						+ "' placeholder='Enter Action Text'</td> </tr>";
				htm += "<tr class='123'><td align='center' style='width:15%'><p id='addcc"+i+"'><strong>Color Code</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpcc"+i+"'>Color Code</p></td><td><input type ='text' class ='form-control' id='addicc"
						+ i
						+ "' name ='addicc"
						+ i
						+ "' placeholder='Enter Color Code'</td> </tr></tbody>";
				$('#tab_logic').append(htm);
			}

此外，我在 JQuery UI Sortable 的帮助下启用此表的行排序

$("#tab_logic").sortable({
					items : ".editrow",
					helper : "clone",
					update : function() {
						reorder();
					}
				}).disableSelection();

完成此操作后，我在 JQuery 可滚动的更新属性中运行重新排序函数，它将更新所有表列的 id。由于每个 td 元素都不同，我需要能够滚动浏览每个元素并获取它们的 id 并更新它。

对此我的重新排序功能是这样的

function reorder() {
			var order = $("#tab_logic").find('td');
			alert(order);
			var size = order.size();
			alert(size);

			for (var i = 0; i < order.size(); i++) {
				var t = order[i].attr('id');
				alert(t);
			}
		}

但var t = order[i].attr('id'); 没有给我要更新的 td 元素的 id 。我怎么得到它

我也尝试过使用

function reorder() {
			var order = $("#tab_logic").find('td');
			var order = $("#tab_logic td");
			alert(order.length);
			order.each(function(){
				var t = var t = $(this).children("p:last").attr('id');
				alert(t);
				
			});

		}

【问题讨论】：

因为 id 是在 p 标记上定义的，在 td 旁边，而不是 td 本身？顺便说一句，改变 id 的意义何在？
@Thomas 该表是我在春季提交给我的控制器的表单的一部分，用于更新数据库。所以为此我需要相应地更新 id 。你能告诉我如何在 for 循环中获取 td 的 id 吗？
而不是更新id客户端，为什么不按正确的顺序发送项目并在后端更新订单更改？更新元素的id 通常不会在前端完成。

标签： javascript jquery html jquery-ui

【解决方案1】：

我会使用.each()。

类型：函数（整数索引，元素元素）

为每个匹配元素执行的函数。

function reorder() {
  var order = $("#tab_logic").find('td');
  alert(order);
  var size = order.size();
  alert(size);

  order.each(function(k, v){
    console.log("TD #" + k + " ID: " + $(v).attr("id"));
    var t = $(v).attr('id');
      alert(t);
    }
  });
}

【讨论】：