javascript - 包含用户添加的行以及每行上的输入元素查找的表单

Question

fiddle : https://jsfiddle.net/kc4fes2w/3/

在链接的 fiddle 中，我需要这样做:

1. 现在在第 28 行，lookup_arr[fm.user_entered_1.value] ，输入元素的名称实际上只是 lookup_arr[fm.user_entered_1.value] ，但它需要变成lookup_arr[fm.user_entered_2.value] , lookup_arr[fm.user_entered_3.value] , lookup_arr[fm.user_entered_4.value]等，随着用户添加和删除更多行，以便查找 div 可以显示用户在每行上输入的值的描述，而不仅仅是第一行。我有一个名为 rowCount 的变量在 fiddle 中，每行应该包含正确的数字，但我似乎无法合并它。

2. 此外，我需要这样做，以便在用户更改 user_entered_value_x 时输入，相应的描述将被重新加载。例如，在 fiddle 中，如果 XXX更改为YYY ，描述应更改为 bunch of Ys在那一行。

Answer 1

这是我对您想要实现的目标的尝试。显然我改变了一堆代码，但添加了注释试图解释一切。

https://jsfiddle.net/SeanWessell/kc4fes2w/5/

我用 id = addedRows 删除了 tr，并将 id 移动到表中，因为我们不想在行中添加行。

HTML:

<table border="1px" id="addedRows"></table>

jQuery:

var lookup_arr = new Array();
lookup_arr['XXX'] = ' bunch of Xs ';
lookup_arr['YYY'] = ' bunch of Ys ';

function addMoreRows(frm) {
        var recRow = '<tr><td width="200px;"><input /></td> <td width="200px;"><div></div></td> <td> <a href="javascript:void(0);" onclick="removeRow(this);">Delete this Row</a> </td> </tr>';

        //add new row and return the jQuery object for it
        var tr = $('#addedRows').append(recRow).find('tr:last');
        //collection of td in the newly added row
        var tds = tr.find('td');
        //find dynamically added input
        var input = tds.eq(0).find('input');
        //set value for new item based off previous rows input value
        var prevInput = tr.prev().find('td').eq(0).find('input');
        input.val(prevInput.val());

        //add description to item based off input value
        tds.eq(1).html(lookup_arr[input.val()]);

        //add handler to update description based off input value
        input.on('input paste', function () {
            $this = $(this);
            var exists = lookup_arr[this.value]
            if (exists) {
                $this.closest('tr').find('td').eq(1).html(lookup_arr[this.value])
            } else {
                $this.closest('tr').find('td').eq(1).html('not found')
            }

        })
    }

    function removeRow(el) {
        $(el).closest('tr').remove();
    }