Question

我希望我的js每次用户添加首字母时都添加一行。我的代码在用户第一次输入姓名缩写时起作用，第一行下将创建一个新行，但此后不再添加。我不确定我需要做什么。

我的JS代码：

(function(){
    var counter = 1;
    $("#preformedBy").change(function(){
        $('#timeStamp').html(new Date().toLocaleString());
        $('#harvestedCannabis > tbody:last-child').append('<tr><td><input type="number" id="toteNum" readonly></td><td><input type="number" step=".1">' + 
        '</td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td>' + 
        '<input type="text"></td><td><input type="text" id="preformedBy"></td><td id="timeStamp"><input type="text" readonly></td></tr>');
        counter = counter + 1;
        $('#toteNum').html(counter)
    })
});

我的HTML：

<table id="harvestedCannabis">
                <tr>
                    <th>Tote #</th>
                    <th>Flowers</th>
                    <th>Trim A</th>
                    <th>Trim B</th>
                    <th>Waste</th>
                    <th>Originating Line(A,B,C)</th>
                    <th>Preformed By</th>
                    <th>Time Stamp</th>
                </tr>
                <tr>
                    <td id="toteNum"><input type="number" value="1" readonly></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="text"></td>
                    <td><input type="text" id="preformedBy"></td>
                    <td id="timeStamp"><input type="text" readonly></td>
                </tr>
            </table>

我希望表格在用户插入姓名首字母后自动根据用户要求不断添加新行

Answer 1

您的代码有两个主要问题。我会解释它们，但是首先看一下我用您的代码制作的这个小提琴，该版本实际上有效： https://jsfiddle.net/49Ln0qcf/#&togetherjs=2hdIlfBaC0

现在，让我们探究您出了错的地方：

1。您正在监听onChange事件的ID属性。第一次使用它是因为在那个时候您只有一个id为“ preformedBy”的元素，但是在添加第二行之后，您将拥有两个具有相同ID的元素。 jQuery正在监听dom中ID的第一个实例，因此不会监听您的其他输入字段。因此，将您的id属性替换为一个类，然后您的.preformedBy选择器将在第二次迭代后继续工作。

2。仅采取上述步骤将无法修复您的代码。为了获得比第一次迭代更多的效果，您需要收听.preformedBy类的父元素。在您的代码中，您像这样直接监听preformedBy：

$("#preformedBy").change(function(){

这里的问题是，在页面加载时，jquery只知道页面加载时存在的dom元素，因此是preformedBy的第一个也是唯一的实例。因此，jQuery将继续侦听该元素，并且仅继续侦听该元素，因为它不知道您添加到dom页面加载后的所有元素。为了使jQuery能够监听preformedBy的所有实例，您需要监听父选择器。注意，在我的代码中，我正在像这样监听preformedBy：

$("#harvestedCannabis").on('change', '.preformedBy', function(){

主要区别在于我的代码侦听父元素上的更改事件，但专门侦听该父元素中所有和'.preformedBy'的事件。就像您的代码正在使用preformedBy选择器监听唯一元素一样。

我希望这会有所帮助。

有效的最终代码： html：

<table id="harvestedCannabis">
                <tr>
                    <th>Tote #</th>
                    <th>Flowers</th>
                    <th>Trim A</th>
                    <th>Trim B</th>
                    <th>Waste</th>
                    <th>Originating Line(A,B,C)</th>
                    <th>Preformed By</th>
                    <th>Time Stamp</th>
                </tr>
                <tr>
                    <td id="toteNum1"><input type="number" value="1" readonly></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="number" step=".1"></td>
                    <td><input type="text"></td>
                    <td><input type="text" class="preformedBy"></td>
                    <td id="timeStamp1"><input type="text" readonly></td>
                </tr>
            </table>

jQuery：

var counter = 1;
$("#harvestedCannabis").on('change', '.preformedBy', function(){
  $('#timeStamp'+counter).html(new Date().toLocaleString());
  $('#harvestedCannabis > tbody:last-child').append('<tr><td><input type="number" id="toteNum'+(counter + 1)+'" readonly></td><td><input type="number" step=".1">' + 
                                                    '</td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td><input type="number" step=".1"></td><td>' + 
                                                    '<input type="text"></td><td><input type="text" class="preformedBy"></td><td id="timeStamp'+(counter + 1)+'"><input type="text" readonly></td></tr>');
  $('#toteNum'+(counter + 1)).val(counter + 1);
  counter = counter + 1;
});

Answer 2

您正在使用#toteNum值更改所有元素counter

<td id="toteNum"><input type="number" value="1" readonly></td>

创建新元素时，您需要重新绑定侦听器。

代码正常工作时，HTML将包含2个#preformedBy元素，同一页面上可能会有唯一的ID。

Answer 3

尝试insertRow（）和insertCell（）方法。

根据W3Schools示例：

https://www.w3schools.com/jsref/met_table_insertrow.asp

Answer 4

从您的html和js代码中删除ID，然后使用类选择器触发更改功能，然后它应该可以工作。

JS函数仅追加一行

4 个答案: