为该按钮将创建的每个新行添加i ++ [英] Add i++ for each new row that will created by the button

问题描述

我尝试使用PHP和Javascript创建一些可重复的字段.这可以正常工作，但是在保存帖子(为WordPress创建插件)后，克隆的行将覆盖最新的行.这是因为我没有为每一行使用唯一的ID.

I try to make some repeatable fields with PHP and Javascript. This works fine, but after saving the post (creating an plugin for WordPress) the cloned row will override the latest one. This is because I don't use unique id's for each row.

我想用javascript添加一个'id'属性，并且我想为id增加1的每一行创建一个.我已经用PHP做过类似的事情，但是发现这不是我想要的，我认为最好使用javascript，因为当我使用添加新"按钮克隆字段时，数量不会增加+1;

I want to add an 'id' attribute with javascript and I want for each row that is created with the id 1 increase. I had already done something similar with PHP, but found out that this is not what I wanted and I am better out with javascript, I think, because when I clone the field with the "add new" button the amount doesn't increase with +1;

这是我使用过的php代码:

Here is the php code that I had used:

$count = 2;
for ($i = 0; $i < $count; $i++) {

    // Begin a table row
    echo '<tr class="row" id="' . '['.$i.']' . '-repeatable">';
    echo '<td class="order">' . '['.$i.']' . '</td>';

            // Do cool stuff inside the row

    echo '<td class="remove"><a class="repeatable-remove button" href="#">-</a></td>';
    echo '</tr>'; // End .row

} // End for loop

<a href"#" class="button">Add new row</a>

可重复字段的JS代码:

JS code for the repeatable fields:

// Add repeatable row
jQuery('.repeatable-add').click(function() {
    // Clone row
    var row = jQuery(this).closest('.ui-sortable').find('tbody tr.row:last-child');
    var clone = row.clone();

    clone.find('input[type=text], text, textarea, select, input.upload_image').val(''); // Reset the values
    clone.find('.preview_image').attr('src', ''); // Reset the values

    row.after(clone);

    //
    return false;
});

我认为我必须执行以下代码段的操作:

I think I have to do something like this snippet of line:

clone.find('tr.row').attr('id', 'repeatable-' + addInteger);

但是像我在PHP中的示例一样，如何在Jquery/Javascript中增加+1?

But how do I increase with +1 inside Jquery/Javascript, like my example in PHP?

推荐答案

您要做的是查看您要克隆的行的ID，并使用该ID为新行提供适当的索引值.我在您的示例中添加了两行代码，其中一行定义了一个名为clonedIdIndex的新变量，另一行使用该变量中的值为克隆的行定义了一个新ID.

What you want to do is look at the ID of the row you're cloning and use that ID to give the new row its proper index value. I added two lines of code to your example, one defining a new variable called clonedIdIndex and one using the value in that variable to define a new ID for the cloned row.

jQuery('.repeatable-add').click(function() {
    // Clone row
    var row = jQuery(this).closest('.ui-sortable').find('tbody tr.row:last-child'),
        clone = row.clone(),
        clonedIdIndex = parseInt( clone.find('tr.row').attr('id').split('-')[1], 10 );

    clone.find('input[type=text], text, textarea, select, input.upload_image').val('');    
    clone.find('.preview_image').attr('src', ''); // Reset the values

    // Assign new ID
    clone.find('tr.row').attr('id', 'repeatable-' + (++clonedIdIndex));

    row.after(clone);

    //
    return false;
});

这篇关于为该按钮将创建的每个新行添加i ++的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！