在Jquery中克隆表行

Question

Running into a bit of a brick wall with jquery, I currently have the following code:

http://jsfiddle.net/uSLhb/1/

The clone method being:

$("#addMore").click(function() {
    $('.user_restriction:last').clone().insertAfter(".user_restriction:last");
    return false;
});

As you can see I have it set up so you can easily clone the row.

The problem I am facing is showing the correct select list (In the 'Field' column) in the new cloned elements, depending on what field they select from the first select (In the 'table' column) field in the row.

Wondering if anyone can help me find a solution, thanks!

Answer 1

Working example here - I had to use jsbin as fiddle was playing up!

Clone does not maintain the selected state, so you'll need to grab the value before cloning and set it after.

Your click now becomes:

$("#addMore").click(function() {
   var value = $('.user_restriction:last').find('select').val(); 
  $('.user_restriction:last').clone().insertAfter(".user_restriction:last");

        //alert(value);
$('.user_restriction:last').find('select').val(value);
    return false;
});

Answer 2

The problem you are facing occurs, because you are using IDs for your selects. IDs must be unique in a page, otherwise you'll run into trouble. If you're cloning a select with an id, the id will be cloned too, thus producing an invalid document.

Have a look at the example I created on JsBin

Markup:

<tr class="user_restriction">
    <td>
        <select name="table[]" class="userselect">
            <option value="" selected>---</option>
            <option value="members">Members</option>
            <option value="staff_positions">Staff Positions</option>
        </select>
    </td>
    <!-- and so on, basically just changed ids to classes -->            
</tr>

I changed all the IDs to classes and altered the change-handler, because this was your second problem.

An event-handler gets bound to the elements that are selected, not to those you add afterwards. This is a proper use-case for event-delegation, when the handler is bound to a parent and catches, in this example, the change event from a child select-element, no matter when it was added to the DOM.

Using jQuery, this is a way to achieve this:

$('table.table').on('change', '.userselect', function() {

    var activeRow = $(this).parents('tr');

    activeRow.find('td').eq(1).find('select').hide();

    if(this.value.length === 0){
        activeRow.find('td').eq(1).find('select').eq(0).show();
    }else{
        activeRow.find("." + this.value).show();
    }

});

The handler is bound to your table - element, .userselect is a class I added to the first select in a row. So every change on an element that was added later would be handled too. In the handler, I changed the behaviour to affect only the actual table-row, not the whole table.