Question

我有一个发票系统表单，我必须实现表单克隆技术。我能够克隆旧行并将其作为表单中的新行附加但我的问题是我有一个下拉列表，其中有一些选项，当选中它时会在所选行之后创建一个新的div。当我不在ddl（下拉列表）中选择任何选项时，我可以克隆行，但如果选择下拉列表并显示div，则无法进行克隆。这是我的代码

<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>
</table>
<span id="add">Add Row</span

＆GT;

正如你可以从代码中看到的，我有一个ddl“#expense_type”，如果用户选择了“Asset”这个选项，那么我创建一个带有一些额外字段的div的动态行。这是一个：

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

此div包含用户可以添加有关资产的更多信息的字段。现在我真正做的是，当用户点击“#add”时，我克隆了第一行id为“row_1”，然后在最后一行之后追加，但如果最后一行已经有动态div显示那么我克隆了行不起作用。我希望你们有我的问题，你的帮助将不胜感激。如果在我现有的代码中有任何错误（我确定是），请随时发表评论。

形成克隆jquery

0 个答案: