如何在Jquery Sortable

时间:2016-06-26 12:10:50

标签: javascript jquery html jquery-ui

我有一张像这样的表

<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 scrollable的update属性中运行函数重新排序,它将更新所有表列的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);
				
			});

		}

1 个答案:

答案 0 :(得分: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);
    }
  });
}