Question

我有一个脚本可以克隆表行并增加id，名称和事件属性。

我遇到的问题是我想在1rs文本字段（onchange）内克隆并增加id="code"事件属性，并希望克隆/增加onkeyup事件第二个文本字段（id="qte"）

内的属性

目前，onchange和onkeyup事件在两个文本字段中都是重复的。

这是 Jquery ：

jQuery.fn.addClone = function() {

    return this.each(function() {

        // get row for cloningg
        var row = $(this).parents('tr');
        var parent = {};

        // use tbody or table parent
        if ( $(row).parents('tbody').length>0) {
            parent = $(row).parents('tbody');
        } else {
            parent = $(row).parents('table');
        }

        // inject clone
        var copy = $(row).clone();
        $(copy).addClass('sadey');
        $(copy).addClass('isclone');
        $(parent).append( copy );

        // remove last td and replace with remove html
        $('.sadey').children('td:last').remove();

        var id = ($('.isclone').length + 1);

        $('.sadey').append('<td><button class="btn btn-block btn-danger" id="clickme" onclick="$(this).killClone' + id +'()">Retirer</button></td>');

        // increment all ids and names
        $('.sadey').find('*').each(function() {
            var tempId = $(this).attr('id');
            if (typeof tempId != 'undefined' && tempId!='') {
                $(this).attr('id',tempId  + '_' +  id);
                $(this).attr('onchange','oncode_change' +  id + "(this.value)");
                $(this).attr('onkeyup','onqte_change' +  id + "(this.value)");
                //$(this).parents('div','txtHint3' +  id + "()");
            }
            var tempName = $(this).attr('name');
            if (typeof tempName != 'undefined' && tempName!='') {
                $(this).attr('name',tempName + '_' + id);
            }

        });

        // remove active tag
        $('.sadey').removeClass('sadey');

    });

};

HTML ：

<table class="table table-striped" id="FinancialDataTable">
    <thead>
        <tr>
            <th style="width: 10%;">Code</th>
            <th style="width: 5%;">Qté</th>
            <th style="width: 25%;">Produit</th>
            <th style="width: 25%;">Description</th>
            <th style="width: 25%;">Prix</th>
            <th style="width: 10%;">Action</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>
                <div class="form-group">
                    <input type="text" id="code" name="code" class="form-control" onchange="oncode_change(this.value)"   />
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input type="text" name="qte" id="qte" class="form-control" value="1" onkeyup="onqte_change(this.value)" />
                </div>
            </td>
            <td colspan="3"><div id="txtHint3" style="width: 100%"> </div></td>
            <td><button type="button" class="btn btn-primary btn-sm" onClick="$(this).addClone();">Ajouter un autre article</button></td>
        </tr>
    </tbody>
</table>

我也尝试像这样更新这部分：

$('.sadey').find('*').each(function() {
    var tempId = $(this).attr('id');
    if (typeof tempId != 'undefined' && tempId!='') {
        $(this).attr('id',tempId  + '_' +  id);
        $("#code").attr('onchange','oncode_change' +  id + "(this.value)");
        $("#qte").attr('onkeyup','onqte_change' +  id + "(this.value)");
        //$(this).parents('div','txtHint3' +  id + "()");
    }
    var tempName = $(this).attr('name');
    if (typeof tempName != 'undefined' && tempName!='') {
        $(this).attr('name',tempName + '_' + id);
    }

这个解决方案实际上有效，但是当我运行它时，输入字段（1,2,3,4,5等）的顺序混乱，DIV不再克隆/递增，这可能是某些原因导致的逻辑问题..

我是JQuery的新手，非常感谢任何帮助!!

JQuery行克隆和事件属性分离

0 个答案: