Javascript将行添加到HTML表和增量ID

Question

这是我在这个网站上的第一篇文章,所以希望你能对我很轻松.我正在尝试创建一个HTML/PHP表单,并在单击一个按钮时使用一小段Javascript向表中添加其他行,并增加两个字段的ID.

该按钮用于添加行,但它似乎不会增加ID,只需使用与上一行相同的ID.希望有人可以帮忙吗？

$(window).load(function(){
        var table = $('#productanddates')[0];

    var newIDSuffix = 2;
    $(table).delegate('#button2', 'click', function () {
        var thisRow = $(this).closest('tr')[0];

        var cloned = $(thisRow).clone();
        cloned.find('input, select').each(function () {
            var id = $(this).attr('id');
            id = id.substring(0, id.length - 1) + newIDSuffix;
            $(this).attr('id', id);
        });

        cloned.insertAfter(thisRow).find('input:date').val('');

        newIDSuffix++;
    });
});  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="blue-bar ta-l">
    <div class="container">
        <h1>Submit Your Insurance Renewal Date(s)</h1>
    </div>
</div>
<div class="grey-bar">
    <div class="container">
        <div class="rounded-box">
            <div>
                <label for="name">Name</label>
                <input type="text" id="name" name="name" autocomplete="off" required />
            </div>
            <div>
                <label for="name">Renewal Dates</label>
            </div>
            <table width="100%" border="0" cellspacing="0" cellpadding="5" id="productanddates" class="border">
                    <tr>
                        <td>
                            <select name="insurance_type1" id="insurance_type1">
                                <option></option>
                                <option>Car</option>
                                <option>Home</option>
                                <option>Van</option>
                                <option>Business</option>
                                <option>GAP</option>
                                <option>Travel</option>
                            </select>
                        </td>
                        <td>
                            <input type="date" name="renewal_date1" id="renewal_date1" />
                        </td>
                        <td>
                            <input type="button" name="button2" id="button2" value="+" />
                        </td>
                    </tr>
            </table>
            <div>
                <label for="telephone_number">Contact Number</label>
                <input type="tel" id="telephone_number" name="telephone_number" pattern="\d{11}" autocomplete="off" required />
            </div>
            <div>
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" autocomplete="off" required />
            </div>
            <div>
                <input name="submit" type="submit" value="Submit" class="btn">
            </div>
        </div>

Answer 1

我已经继续尝试了我认为您正在努力实现的目标的更清晰版本。我将逐步介绍主要更新：

1. 更新了按钮id并name从“button2”更新为“button1” - 我假设您希望在每行的输入之间保持索引同步。
2. 更改$(window).load(function() {为$("document").ready(function() {- 虽然两者都可以工作，但前者将等待所有图像完成加载，而后者将在 DOM 完成构建后触发。除非您真的希望首先加载图像，否则我建议您$("document").ready()更快地触发代码。
3. 删除[0]引用- 在 jQuery 选择器集合之后使用的主要原因[0]是引用所选 jQuery 元素的 DOM 版本，以便我们在其上使用“普通”JavaScript 方法。在所有情况下，您都会重新转换 中的变量$(...)，这只是将 DOM 元素转换回 jQuery 对象，因此不需要额外的步骤。
4. 将方法更改.delegate()为.on()- 正如 Howard Renollet 指出的那样，这是现代版本 jQuery 使用的正确方法。请注意，“event”和“target”参数已从on它们在 中的位置交换了delegate。
5. 将事件目标从 更改#button2为:button- 这将确保新行中的所有按钮也允许您添加其他行，而不仅仅是第一行。
6. 将目标从单击的行切换clone到表中的最后一行- 这将有助于保持行编号一致并按升序排列。无论单击哪一行，克隆的行都将始终是最后一行，并且新行将始终放置在最后一行的后面。
7. 更改了索引以使用最后一行的索引作为新行的基础，并使用正则表达式来确定它- 现在对表进行排序，您始终可以指望最后一行具有最高索引。通过使用正则表达式/^(.+)(\d+)$/i，您可以将索引值拆分为“索引之前的所有内容”和“索引（即值末尾的一个或多个数字）”。然后，您只需将索引增加 1 并重新附加它即可获得新值。使用正则表达式方法还可以让您轻松适应超过 9 行（即两位数索引）的情况。
8. 更新了每个输入的id和name属性- 我假设您希望基于初始行的每个元素的id和属性都相同，并且您只更新代码中的 和 属性，这会在以下情况下引起问题发送数据。nameid
9. 更改$("input:date")为$("input[type='date'])- 正如 Mouser 指出的那样，这确实是您的代码最初失败的核心原因。所有其他更改将帮助您避免将来出现其他问题，或者只是与“代码质量”相关的更改。

所以 。。。这些是主要的更新。:) 如果我误解了您想要做的事情或者您有任何疑问，请告诉我。

$("document").ready(function() {
	$('#productanddates').on('click', ':button', function () {
		var lastRow = $(this).closest('table').find("tr:last-child");

		var cloned = lastRow.clone();
		cloned.find('input, select').each(function () {
			var id = $(this).attr('id');
			
			var regIdMatch = /^(.+)(\d+)$/; 
			var aIdParts = id.match(regIdMatch);
			var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);

			$(this).attr('id', newId);
			$(this).attr('name', newId);
		});

		cloned.find("input[type='date']").val('');
		cloned.insertAfter(lastRow);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="blue-bar ta-l">
    <div class="container">
        <h1>Submit Your Insurance Renewal Date(s)</h1>
    </div>
</div>
<div class="grey-bar">
    <div class="container">
        <div class="rounded-box">
            <div>
                <label for="name">Name</label>
                <input type="text" id="name" name="name" autocomplete="off" required />
            </div>
            <div>
                <label for="name">Renewal Dates</label>
            </div>
            <table width="100%" border="0" cellspacing="0" cellpadding="5" id="productanddates" class="border">
                    <tr>
                        <td>
                            <select name="insurance_type1" id="insurance_type1">
                                <option></option>
                                <option>Car</option>
                                <option>Home</option>
                                <option>Van</option>
                                <option>Business</option>
                                <option>GAP</option>
                                <option>Travel</option>
                            </select>
                        </td>
                        <td>
                            <input type="date" name="renewal_date1" id="renewal_date1" />
                        </td>
                        <td>
                            <input type="button" name="button1" id="button1" value="+" />
                        </td>
                    </tr>
            </table>
            <div>
                <label for="telephone_number">Contact Number</label>
                <input type="tel" id="telephone_number" name="telephone_number" pattern="\d{11}" autocomplete="off" required />
            </div>
            <div>
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" autocomplete="off" required />
            </div>
            <div>
                <input name="submit" type="submit" value="Submit" class="btn">
            </div>
        </div>