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

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

此行不正确。它会抛出invalid selector错误。

您需要将其更改为：

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

jQuery实际上支持选择器中的:INPUT-TYPE format，但不支持新的HTML5输入类型：所以在这里使用input[type="date"]是现在选择具有HTML5类型的元素的正确方法。请注意价值周围的报价。如果要选择具有特定值的属性。

此处的css选择器的选择器概述：W3schools。

由于此行引发了错误，因此newIDSuffix永远不会更新，因为脚本错误导致脚本在此之前停止。

@ Charlietfl提出了一个关于学习更多关于类和DOM遍历的有效观点。但是，这不会修复此代码。或解释为什么你的代码不起作用。然而，这是一个很好的提示。

Answer 2

我已经开始尝试用我认为你想要完成的更干净的版本。我将介绍主要更新：

将按钮id和name从“button2”更新为“button1” - 我认为您希望保持索引在每个输入中保持同步行。
将$(window).load(function() {更改为$("document").ready(function() { - 虽然其中任何一个都可以使用，但前者会等到所有图像都完成加载，而后者会在DOM完成构建时触发。除非您真的希望首先加载图像，否则我建议使用$("document").ready()，以便更快地触发代码。
删除[0]引用 - 在jQuery选择器集合之后使用[0]的主要原因是引用所选jQuery元素的DOM版本，以便我们使用一个“香草”JavaScript方法就可以了。在所有情况下，您正在重新计算$(...)中的变量，这些变量只是将DOM元素转换回jQuery对象，因此不需要额外的步骤。
将.delegate()方法更改为.on() - 正如Howard Renollet所说，这是用于现代版jQuery的正确方法。请注意，“事件”和“目标”参数在on中交换了位置delegate。
将事件目标从#button2更改为:button - 这将确保新行中的所有按钮也允许您添加其他行，而不是只是第一个。
将点击的行中的clone目标切换到表格中的最后一行 - 这有助于保持行编号的一致性并按升序排列。克隆的行将始终是最后一行，无论单击哪一行，新行总是放在最后一行。
更改索引以使用最后一行的索引作为新行的基础并使用正则表达式来确定它 - 现在订购的表，您始终可以依赖最后一行拥有最高指数。通过使用正则表达式/^(.+)(\d+)$/i，您可以将索引值拆分为“索引之前的所有内容”和“索引（即，值或更多数字，在值的末尾）”。然后，您只需将索引递增1并重新附加它，即可获得新值。使用正则表达式方法还可以让您轻松适应，它可以超过9行（即两位数索引）。
更新了每个输入的id和name属性 - 我认为您希望id和name属性为基于初始行，每个单独的元素都是相同的，并且您只更新代码中的id，这会在发送数据时导致问题。
将$("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>

Answer 3

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

Javascript将行添加到HTML表＆amp;增量ID

3 个答案: