jquery形式克隆

Question

大家好我已经尝试过克隆一个表单而且效果很好。我是表单中所有行的下拉列表，当选择其中一个选项时，我必须在当前行之后创建一个小框。我也做了这个，但真正的问题是，当我添加一个新行（即克隆）然后我选择其中一个选项（这是ASSET）在我的情况下，我的小盒子很好地出现但是之后如果我点击ADD ROW没有添加新行。这是我的代码和工作演示：

http://jsfiddle.net/kkAM6/ 帮助将不胜感激

<table id="expense_table" class="">
    <thead>
        <tr>
            <th>Sl. No</th>
            <th>Particulars</th>
            <th>Type</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_1">
            <td>1</td>
            <td>
                <input type="text" name="particulars" />
            </td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td>
                <input type="text" name="qty" class="input-small" />
            </td>
            <td>
                <input type="text" name="rate" class="input-small" />
            </td>
            <td>
                <input type="text" name="amount" class="input-small" />
            </td>
            <td>X</td>
        </tr>
        <tr id="row_2">
            <td>2</td>
            <td>
                <input type="text" name="particulars" />
            </td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td>
                <input type="text" name="qty" class="input-small" />
            </td>
            <td>
                <input type="text" name="rate" class="input-small" />
            </td>
            <td>
                <input type="text" name="amount" class="input-small" />
            </td>
            <td>X</td>
        </tr>
        <tr id="row_3">
            <td>3</td>
            <td>
                <input type="text" name="particulars" />
            </td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td>
                <input type="text" name="qty" class="input-small" />
            </td>
            <td>
                <input type="text" name="rate" class="input-small" />
            </td>
            <td>
                <input type="text" name="amount" class="input-small" />
            </td>
            <td>X</td>
        </tr>
    </tbody>
</table>
</div> <span id="add">Add Row</span>  

和jquery代码是：

  $('#add').click(function(){

                    var last_row_id = $('#expense_table tr:last').attr('id').split('_')[1];
                    //alert(last_row_id);
                    $('tr[id="row_1"]').clone().insertAfter('#expense_table tr:last');
                    $('#expense_table tr:last').attr('id','row_'+(parseInt(last_row_id) + 1));

            });// end of #add click event


            var $in = new Array();
            $('.exp_type').live('change',function(){
                var id = $(this).closest('tr').attr('id').split('_')[1];

                if($(this).val() == 'asset'){

                    var div = "<tr id=\"asset_"+id+"\"><td colspan=\"7\"><td></tr>"; 
                    $('#row_'+id).after(div);
                    var $box = $('<div/>').attr('class','asset_details');

                    $in[0] = "<tr><td><label>Assest Type:</label></td><td><select name=\"asset_type\" id=\"asset_type\"><option value=\"\">---Select---</option></select></td></tr>";
                    $in[1] = "<tr><td><label>Name:</label></td><td><input type=\"text\" id=\"name\" name=\"name\"/></td></tr>";
                    $in[2] = "<tr><td><label>Description:</label></td><td><input type=\"text\" id=\"asset_description\" name=\"asset_description\" /></td></tr>";
                    $in[3] = "<tr><td><label>Serial No:</label></td><td><input type=\"text\" id=\"asset_serial_num\" name=\"asset_serial_num\" /></td></tr>";

                    $('#asset_'+id).find('td:first').append($box);
                    $box.append($in);

                } else {

                    $('#asset_'+id).fadeOut(500, function() { $('#asset_'+id).remove(); });
                }


            });//end of #expense_type

Answer 1

将ASSET添加到表格的最后一行时，$('#expense_table tr:last')没有ID。最后一个tr是#asset_x内的#asset_x，而不是class本身。

尝试向您的行添加class='input-row'，例如class='table-row'为标准行（因此您可以按照命名ID的行数进行操作，并为每行包括ASSET行<table id="expense_table" class=""> <thead> <tr> <th>Sl. No</th> <th>Particulars</th> <th>Type</th> <th>Qty</th> <th>Rate</th> <th>Amount</th> <th>Action</th> </tr> </thead> <tbody> <tr id="row_1" class="input-row table-row"> <td>1</td> <td><input type="text" name="particulars" /></td> <td> <select id="expense_type" name="expense_type" class="exp_type span2"> <option value="">---Select---</option> <option value="asset">Asset</option> <option value="non_asset">Non Asset</option> </select> </td> <td><input type="text" name="qty" class="input-small" /></td> <td><input type="text" name="rate" class="input-small" /></td> <td><input type="text" name="amount" class="input-small" /></td> <td>X</td> </tr> <tr id="row_2" class="input-row table-row"> <td>2</td> <td><input type="text" name="particulars" /></td> <td> <select id="expense_type" name="expense_type" class="exp_type span2"> <option value="">---Select---</option> <option value="asset">Asset</option> <option value="non_asset">Non Asset</option> </select> </td> <td><input type="text" name="qty" class="input-small" /></td> <td><input type="text" name="rate" class="input-small" /></td> <td><input type="text" name="amount" class="input-small" /></td> <td>X</td> </tr> <tr id="row_3" class="input-row table-row"> <td>3</td> <td><input type="text" name="particulars" /></td> <td> <select id="expense_type" name="expense_type" class="exp_type span2"> <option value="">---Select---</option> <option value="asset">Asset</option> <option value="non_asset">Non Asset</option> </select> </td> <td><input type="text" name="qty" class="input-small" /></td> <td><input type="text" name="rate" class="input-small" /></td> <td><input type="text" name="amount" class="input-small" /></td> <td>X</td> </tr> </tbody> </table> </div> <span id="add">Add Row</span> ，所以你可以在最后一行之后添加一行。

这是一个小提琴：http://jsfiddle.net/kkAM6/

这里修改了HTML：

      $('#add').click(function(){

                var last_row_id = $('#expense_table .input-row:last').attr('id').split('_')[1];
                console.log(last_row_id);
                $('tr[id="row_1"]').clone().insertAfter('#expense_table .table-row:last');
                $('#expense_table tr:last').attr('id','row_'+(parseInt(last_row_id) + 1)).addClass('input-row table-row');

        });// end of #add click event


        var $in = new Array();
        $('.exp_type').live('change',function(){
            var id = $(this).closest('tr').attr('id').split('_')[1];

            if($(this).val() == 'asset'){

                var div = "<tr class=\"table-row\" id=\"asset_"+id+"\"><td colspan=\"7\"><td></tr>"; 
                $('#row_'+id).after(div);
                var $box = $('<div/>').attr('class','asset_details');

                $in[0] = "<tr><td><label>Assest Type:</label></td><td><select name=\"asset_type\" id=\"asset_type\"><option value=\"\">---Select---</option></select></td></tr>";
                $in[1] = "<tr><td><label>Name:</label></td><td><input type=\"text\" id=\"name\" name=\"name\"/></td></tr>";
                $in[2] = "<tr><td><label>Description:</label></td><td><input type=\"text\" id=\"asset_description\" name=\"asset_description\" /></td></tr>";
                $in[3] = "<tr><td><label>Serial No:</label></td><td><input type=\"text\" id=\"asset_serial_num\" name=\"asset_serial_num\" /></td></tr>";

                $('#asset_'+id).find('td:first').append($box);
                $box.append($in);

            } else {

                $('#asset_'+id).fadeOut(500, function() { $('#asset_'+id).remove(); });
            }


        });//end of #expense_type

这里修改了JS：

{{1}}