JQuery Help Needed for ID order given N Rows

Question

Hi. I am trying to add a function that, when a user clicks "remove",

1) updates the numbers in the left-most column 2) updates the id order 3) updates the alternating color scheme

I need help with

1) I am able to update the number row but it currently updates for all rows, even if there isn't anything there. Can somebody show me how to do this only for the populated rows? For example, stop when a given row doesn't have data.

2) Something is wrong with my logic for updating all ids for a given row. What I am trying to do is replace the number at the end of the id name ("numRow11", for example) with the corresponding row number.

            $('#files_list tr').each(function(index) {

                // update number order
                $(this).find("td:first").text(index+1);    

               $(this).find("td").attr('id', $(this).attr('id').replace($(this).attr('id').match(/[\d\.]+/g), index));                          

               if (index % 2 == 0)
                 $(this).removeClass().addClass('evenRow');
               else
                $(this).removeClass().addClass('oddRow');

});

Answer 1

Stop when a row doesn't have data.

docs.jquery.com:

Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop).

Answer 2

I am not sure if there is a property to query the table row to see if it is blank or not. but you can add a hidden field to the table row and use that field to determine if the row is blank or not. or if the row will have only textboxes to enter the data you can do something like this

$('#files_list tr').each(function(index) { var rowblank = true;

 $(this).find("td").filter("input[type=text]").each(function() {
        if ($(this).val().length > 0) {
            rowblank = false;
            return false;
        }
 });

  if (rowblank === false) {

            // update number order
            $(this).find("td:first").text(index+1);    

           $(this).find("td").attr('id', $(this).attr('id').replace($(this).attr('id').match(/[\d\.]+/g), index));                          

           if (index % 2 == 0)
             $(this).removeClass().addClass('evenRow');
           else
            $(this).removeClass().addClass('oddRow');
      }

});

Answer 3

OK, thanks for your responses but I ultimately figured out how to do this another way. The clincher for me was to be able to determine how many rows had data based on the addRow click event in the javascript library i am writing. Once I had the "hasdata" value then the rest was pretty straight forward. I posted it below in case it is helpful to anybody in the future.

Thanks for your help.

// current count of rows with data
                         var hasdata = element.multi_selector.count - 2;

                         $('#files_list tr').each(function(index) { 

                            // THIS REPLACES THE ROW NUMBER ORDER
                            if (index < hasdata)
                                $(this).find("td:first").text(index+1);
                            else
                                $(this).find("td:first").text("");  

                            // THIS RESETS THE ALTERNATING COLOR SCHEME
                            if (index % 2 == 0)
                                $(this).removeClass().addClass('evenRow');
                            else
                                $(this).removeClass().addClass('oddRow');          

                            // THIS UPDATES THE ID VALUES - "someid1, someid2, someid3, someid4, etc"
                            $(this).find("td").each(function(){

                               var id = $(this).attr('id');   
                               $(this).attr('id', id.replace(id.match(/[\d\.]+/g), index));

                            });