具有用户添加的行的窗体，以及对每行的输入元素查找

Form with user added rows, and input element lookups on each row

本文关键字：输入 查找 元素 用户 添加 窗体      更新时间：2023-09-26

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

在链接的小提琴中，我需要使其：

  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的变量，它应该包含每行的正确数字，但我似乎无法将其合并

  2. 此外，我需要使其在用户更改user_entered_value_x输入时，重新加载相应的描述。例如，在Fiddle中，如果XXX更改为YYY，则该行的描述应更改为bunch of Ys。

以下是我对您正在努力实现的目标的尝试。我显然修改了一堆代码，但添加了注释，试图解释一切。

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();
    }
相关文章：