Question

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

form table

我编写了一个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

喜欢..

function runAfterInsertAndOnStart() {    
    $('select.form-control').unbind('click');
    var i = $("#fm_orditms").find('tr').length
    $("#s_prd" + i).click(function(){
       [...]
    });
}

重要的是你的行的第一个ID ...如果你从0开始比它的确定，从1开始，你需要向i添加1

所以这会将你点击表格最后一行中第一个选择的点击...但你需要再次调用该函数，如果你添加了一个新行，来计算新的最后一行

Answer 2

您可以使用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++;
  });
});

基于焦点生成表格行到文本字段

2 个答案: