如何在Jquery可排序后更新多个td的Id

How to update the Id of multiple td after Jquery Sortable

本文关键字:td Id 更新 Jquery 排序      更新时间:2023-09-26

我有一个表,它是这样的

<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滚动的更新属性中运行一个函数reorder,它将更新所有表列的id。由于每个td元素都是不同的,我需要能够滚动它们中的每一个,并获得它们的id并更新它。

我的reorder函数是这样的

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

我会利用.each()

Type: Function(Integer index, Element Element)

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

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