Jquery输入字段增量与表行克隆

Posted 2023-05-07

【中文标题】Jquery输入字段增量与表行克隆

【英文标题】：Jquery input fields incrementation with table row cloning

【发布时间】：2015-09-28 04:39:56

【问题描述】：

我正在处理的脚本存在问题，该脚本在表格中有一组列，每行有 2 个输入字段。

第一个输入字段是<input type="text" id="code_x" name="code_x" class="form-control" onchange="oncode_changex(this.value)" />，这个会在onchange时触发oncode_changex(this.value)。

第二个输入字段是<input type="text" id="qte_x" name="qte_x" class="form-control" onkeyup="onqte_changex(this.value)" />，这个会在onkeyup时触发另一个函数onqte_change(this.value)。

每次添加一行时，我的 JQuery 脚本都会克隆该行并将其 id、名称和事件属性增加 1。

克隆和递增工作非常完美。

我遇到的问题是两个事件属性在两个输入字段中都重复。通常脚本应该增加“#code_x”内的onchange和“#qte_x”内的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_changex' +  id + "(this.value)");
        $(this).attr('onkeyup','onqte_changex' +  id + "(this.value)");
    
    var tempName = $(this).attr('name');
    if (typeof tempName != 'undefined' && tempName!='') 
        $(this).attr('name',tempName + '_' + id);
    
);

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

);

;

这里是 HTML：

<tr>
                <td>                    
                    <div class="form-group">
                  <input type="text" id="code_x" name="code_x" class="form-control"  onchange="oncode_changex(this.value)"   />
                </div>

                </td>
                <td>

                    <div class="form-group">
                  <input type="text" name="qte_x" id="qte_x" class="form-control" value="1" onkeyup="onqte_changex(this.value)" />
                </div>

                </td>

                <td colspan="3"><div id="txtHint3_19" 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> 

我对 JQuery 还很陌生，所以如果任何人可以向我解释为什么事件属性会增加，但也会在两个文本字段中重复。

克隆后的结果：

<tr class="isclone">

<td>
    <div class="form-group">
        <input id="code_x_2" class="form-control" type="text" onchange="oncode_changex2(this.value)" name="code_x_2" onkeyup="onqte_changex2(this.value)"></input>

</div>

<div class="form-group">
    <input id="qte_x_2" class="form-control" type="text" onkeyup="onqte_changex2(this.value)" value="1" name="qte_x_2" onchange="oncode_changex2(this.value)"></input>

    </div>
</td>
<td colspan="3"></td>
<td></td>

我们可以在两个文本字段中看到 onkeyup 和 onchange 事件。它们应该是分开的......

感谢您的帮助！

【参考方案1】：

据我了解，您确实在两个输入上都设置了两个属性：

    $(this).attr('id',tempId  + '_' +  id);
    $(this).attr('onchange','oncode_changex' +  id + "(this.value)");
    $(this).attr('onkeyup','onqte_changex' +  id + "(this.value)");

您可能想在设置之前检查输入是否具有属性，例如：

if ($(this).attr('onchange')) 
     $(this).attr('onchange','oncode_changex' +  id + "(this.value)");
  

对另一个属性做同样的事情。

【讨论】：

不客气；）。如果有效，您可以选择我的答案作为选定答案吗？谢谢！