javascript - 基于文本字段的焦点生成表行

Question

我在 html 页面中创建了一个表格，其中每个单元格都有一个与标题相对应的表单字段。最初我有两行，如下图所示。

我编写了一个 jquery 函数，该函数应该在单击最后一行中的第一个表单元素时生成额外的行。该函数如下所示。

$(document).ready(function() {
var i = 2;
$("#s_prd" + i).click(function() {
                $("#fm_orditms").append(
                        '<tr>\n\
                        <td>\n\
                            <select id="s_prd' + (i + 1) + '" class="form-control" name="prdId[]">\n\
                                <option>Select</option>\n\
                            </select>\n\
                        </td>\n\
                        \n\
                        <td>\n\
                            <select id="s_ccon' + (i + 1) + '" class="form-control" name="cconId[]">\n\
                                <option>Select</option>\n\
                            </select>\n\
                        </td>\n\
                        <td>\n\
                            <input type="number" name="qty[]" class="form-control" id="qty' + (i + 1) + '" style="width: 120px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <input type="date" name="ordDate[]" class="form-control" id="ordDate' + (i + 1) + '" style="width: 145px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <input type="date" name="bilDate[]" class="form-control" id="bilDate' + (i + 1) + '" style="width: 145px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <input type="date" name="dlvDate[]" class="form-control" id="dlvDate' + (i + 1) + '" style="width: 145px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <select id="s_mdt' + (i + 1) + '" class="form-control" name="mdt[]" style="width: 120px;">\n\
                                <option>Select</option>\n\
                                <option value="air">Air</option>\n\
                                <option value="digital">Digital</option>\n\
                                <option value="hand">Hand</option>\n\
                                <option value="road">Road</option>\n\
                                <option value="sea">Sea</option>\n\
                            </select>\n\
                        </td>\n\
                        </tr>\n\
                        '
                        );
                i++;
            });
});

由于 i=2 的初始值，只有当我单击第二行时才会生成该行。我希望它的方式是每次单击表中最后一行的第一个字段时都会生成一个附加行。请告诉我如何实现这个特殊功能。

Answer 1

您可以通过delegated events来实现这一点如下

$(document).ready(function() {

  var $ordTable = $("#fm_orditms");
  $ordTable.on("click", "tr:last :input:first", function() {
    var i = $("tr", $ordTable).length;
    $ordTable.append(
                    '<tr>\n\
                        <td>\n\
                            <select id="s_prd' + (i + 1) + '" class="form-control" name="prdId[]">\n\
                                <option>Select</option>\n\
                            </select>\n\
                        </td>\n\
                        \n\
                        <td>\n\
                            <select id="s_ccon' + (i + 1) + '" class="form-control" name="cconId[]">\n\
                                <option>Select</option>\n\
                            </select>\n\
                        </td>\n\
                        <td>\n\
                            <input type="number" name="qty[]" class="form-control" id="qty' + (i + 1) + '" style="width: 120px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <input type="date" name="ordDate[]" class="form-control" id="ordDate' + (i + 1) + '" style="width: 145px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <input type="date" name="bilDate[]" class="form-control" id="bilDate' + (i + 1) + '" style="width: 145px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <input type="date" name="dlvDate[]" class="form-control" id="dlvDate' + (i + 1) + '" style="width: 145px;"/>\n\
                        </td>\n\
                        <td>\n\
                            <select id="s_mdt' + (i + 1) + '" class="form-control" name="mdt[]" style="width: 120px;">\n\
                                <option>Select</option>\n\
                                <option value="air">Air</option>\n\
                                <option value="digital">Digital</option>\n\
                                <option value="hand">Hand</option>\n\
                                <option value="road">Road</option>\n\
                                <option value="sea">Sea</option>\n\
                            </select>\n\
                        </td>\n\
                    </tr>\n\
                        '
    );
    i++;
  });
});