javascript - 使用 Jquery 添加行 - 需要增加输入名称和 onkeyup 事件调用者

Question

我对 JQuery 有点陌生，仍然试图弄清楚如何在表末尾添加(克隆)表行并增加 input name="code10" , onkeyup="recordTrans1(this.value) "，以及表格单元格内的这个 div ( <div class="txtHint3"></div> )。

本质上，我只是想让这三件事增加 1(例如: name="code11" 、 onkeyup="recordTrans2(this.value) "、 <div class="txtHint4"></div> 等等...)

我现在拥有的代码可以完美地添加或删除表格行。

我遇到的问题是，当我添加新的表格行时，我在页面的“查看源代码”和 name="codeX" 中看不到它。 , onkeyup ，并且 div 没有递增。

我尝试了几种不同的方法，但似乎无法弄清楚，因此我们将不胜感激!

这是我到目前为止的代码:

<script>

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();
    $('.sadey').append('<td><button class="btn btn-block btn-danger" onclick="$(this).killClone()">Retirer</button></td>');

    // increment all ids and names
    var id = ($('.isclone').length + 1);
    $('.sadey').find('*').each(function() {
        var tempId = $(this).attr('id');
        if (typeof tempId != 'undefined' && tempId!='') {
            $(this).attr('id',tempId  + '_' +  id);
        }
        var tempName = $(this).attr('name');
        if (typeof tempName != 'undefined' && tempName!='') {
            $(this).attr('name',tempName + '_' + id);
        }
    });

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

});

};

// remove a row and re-index the clones
jQuery.fn.killClone = function() {

var row = $(this).parents('tr');
$(row).remove();

// re-index
var id = 2;
$('.isclone').each(function() {
    $(this).find('*').each(function() {

        var tempId = $(this).attr('id');
        if (typeof tempId != 'undefined' && tempId!='') {
            tempId = tempId.split('_');
            $(this).attr('id',tempId[0]  + '_' +  id);
        }
        var tempName = $(this).attr('name');
        if (typeof tempName != 'undefined' && tempName!='') {
            tempName = tempName.split('_');
            $(this).attr('name',tempName[0]  + '_' +  id);
        }
    });
    id++;
 });
};

</script>

这是 HTML:

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

            <tbody>



              <tr>
                <td>

                    <div class="form-group">
                  <input type="text" id="code10" name="code16" class="form-control" onkeyup="recordTrans1(this.value)"   />
                </div>

                </td>
                <td>

                    <div class="form-group">
                  <input type="text" name="qte16" class="form-control" value="1" />
                </div>

                </td>
                <div id="txtHint3">
                <td></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                </div>

                <td><button type="button" class="btn btn-primary btn-sm" onClick="$(this).addClone();">Ajouter un autre article</button></td>
              </tr>

                             </tbody>
          </table>

Answer 1

您无法看到更新后的源代码

右键->查看页面源代码

当您单击它时，浏览器会再次在新选项卡中加载源代码。所以，

不要使用它，而是使用代码检查器

右键单击 -> 检查元素

要更新 onkeyup 属性，您可以通过以下方式修改部分代码:

$('.sadey').find('*').each(function() {
        var tempId = $(this).attr('id');
        if (typeof tempId != 'undefined' && tempId!='') {
            $(this).attr('id',tempId  + '_' +  id);
            $(this).attr('onkeyup','recordTrans' +  id + "()");
        }
        var tempName = $(this).attr('name');
        if (typeof tempName != 'undefined' && tempName!='') {
            $(this).attr('name',tempName + '_' + id);
        }
    });