Fatal编程技术网

jquery表单克隆

jquery forms

jquery表单克隆,jquery,forms,cloning,Jquery,Forms,Cloning,大家好，我试过克隆一个表单，效果很好。我在表单中的所有行中创建一个下拉列表，当选择其中一个选项时，我必须创建一个小框，显示在当前行的正后方。我也这样做了，但真正的问题是，当我添加一个新行（即克隆），然后在我的情况下选择一个选项（即资产），我的小框会很好地显示出来，但在这之后，如果单击“添加行”，则不会添加新行。以下是我的代码和工作演示： 我们将不胜感激 <table id="expense_table" class=""> <thead> <

大家好，我试过克隆一个表单，效果很好。我在表单中的所有行中创建一个下拉列表，当选择其中一个选项时，我必须创建一个小框，显示在当前行的正后方。我也这样做了，但真正的问题是，当我添加一个新行（即克隆），然后在我的情况下选择一个选项（即资产），我的小框会很好地显示出来，但在这之后，如果单击“添加行”，则不会添加新行。以下是我的代码和工作演示：

我们将不胜感激

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


序号
详情
类型
数量
比率
数量
行动
1.
---挑选---
资产
非资产
X
2.
---挑选---
资产
非资产
X
3.
---挑选---
资产
非资产
X
添加行
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

$（'#添加'）。单击（函数（）{
var last_row_id=$（'#费用表tr:last'）.attr（'id'）.split（'u'）[1]；
//警报（最后一行\u id）；
$（'tr[id=“row_1”]”）。clone（）.insertAfter（'#expense_table tr:last'）；
$（'#expense_table tr:last'）.attr（'id'，'row_'+（parseInt（last_row_id）+1））；
});// #添加单击事件结束
var$in=新数组（）；
$（'.exp_type'）.live（'change'，function（）{
变量id=$（this）.closest（'tr'）.attr（'id'）.split（'uu'）[1]；
if（$（this）.val（）=='asset'）{
var div=“”；
$（'#行'+id.）。在（div）之后；
var$box=$（''）.attr（'class'，'asset_details'）；
$in[0]=“资产类型：---选择----”；
$in[1]=“名称：”；
$in[2]=“说明：”；
$in[3]=“序列号：”；
$（'#asset'+id）.find（'td:first'）.append（$box）；
$box.append（$in）；
}否则{
$（'#asset_'+id）.fadeOut（500，function（）{$（'#asset_'+id）.remove（）；}）；
}
});//#费用#类型结束
将资产添加到表的最后一行时，
$（“#expense#table tr:last”）
没有id。最后一个
tr
是在您的
#ASSET#x
内部，而不是
#ASSET#x
本身

尝试将
class
添加到您的行中，例如标准行的
class='input-row'
（这样您可以按照行数命名ID，包括资产行在内的每一行的
class='table-row'
），这样您就可以在最后一行之后添加一行

这是一把小提琴：

以下是：

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


序号
详情
类型
数量
比率
数量
行动
1.
---挑选---
资产
非资产
X
2.
---挑选---
资产
非资产
X
3.
---挑选---
资产
非资产
X
添加行
以下是：

      $('#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

$（'#添加'）。单击（函数（）{
var last_row_id=$（'#费用_表。输入行：last'）.attr（'id'）.split（'u'）[1]；
console.log（最后一行\u 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'）；
})；//结束#添加单击事件
var$in=新数组（）；
$（'.exp_type'）.live（'change'，function（）{
变量id=$（this）.closest（'tr'）.attr（'id'）.split（'uu'）[1]；
if（$（this）.val（）=='asset'）{
var div=“”；
$（'#行'+id.）。在（div）之后；
var$box=$（''）.attr（'class'，'asset_details'）；
$in[0]=“资产类型：---选择----”；
$in[1]=“名称：”；
$in[2]=“说明：”；
$in[3]=“序列号：”；
$（'#asset'+id）.find（'td:first'）.append（$box）；
$box.append（$in）；
}否则{
$（'#asset_'+id）.fadeOut（500，function（）{$（'#asset_'+id）.remove（）；}）；
}
})；//结束#费用_类型
请大家帮帮我。谢谢Zemljoradnik..它按照我想要的方式工作。非常感谢。请仔细检查一下，如果答案对你有效，你必须接受答案。还有一个mo