Evan Root Evan Root - 5 months ago 16
jQuery Question

How to update the Id of multiple td after Jquery Sortable

I have a table which is like this



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

</table>




I am adding rows which has multiple columns to the table like this



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





Further i am enabling the sorting of the rows of this table with the help of JQuery UI Sortable



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





After doing this i am running a function reorder in the update attribute of the JQuery scrollable which will update the id of all the table columns . As every td element is different i need to be able to scroll through each one of them and get their id and update it .

to this my reorder function is like this



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





But
var t = order[i].attr('id');
is not giving me the id of the td element to update . How do i get it

I have also tried using



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

});

}




Answer

I would make use of the .each().

Type: Function( Integer index, Element element )

A function to execute for each matched 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);
    }
  });
}
Comments