Question

我创建了一个表，您可以使用多个输入字段添加行，但是我需要两个表。我无法让第二个工作。我检查了控制台，没有错误，我已经尝试复制它并更改标识符，但这不起作用。任何帮助，将不胜感激。代码如下：

$(document).ready(function() {
$("#add_row").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
        if (parseInt($(this).data("id")) > newid) {
            newid = parseInt($(this).data("id"));
        }
    });
    newid++;

    var tr = $("<tr></tr>", {
        id: "addr"+newid,
        "data-id": newid
    });

    // loop through each td and create new elements with name of newid
    $.each($("#tab_logic tbody tr:nth(0) td"), function() {
        var cur_td = $(this);

        var children = cur_td.children();

        // add new td and element if it has a nane
        if ($(this).data("name") != undefined) {
            var td = $("<td></td>", {
                "data-name": $(cur_td).data("name")
            });

            var c =   $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
            c.attr("name", $(cur_td).data("name") + newid);
            c.appendTo($(td));
            td.appendTo($(tr));
        } else {
            var td = $("<td></td>", {
                'text': $('#tab_logic tr').length
            }).appendTo($(tr));
        }
    });

    // add delete button and td
    /*
    $("<td></td>").append(
        $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
            .click(function() {
                $(this).closest("tr").remove();
            })
    ).appendTo($(tr));
    */

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
         $(this).closest("tr").remove();
    });
 });

// Sortable Code
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();

    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });

    return $helper;
};

$(".table-sortable tbody").sortable({
    helper: fixHelperModified      
}).disableSelection();

$(".table-sortable thead").disableSelection();



$("#add_row").trigger("click");
});

FIDDLE

Answer 1

我不打算浏览所有的HTML并进行所有调整，但会提供有关如何使其工作的指导。

首先......由于ID无法在页面中重复，因此您需要为类别切换ID。

接下来，您需要从包装整个模块的每个部分的主容器元素开始。所有使用的选择器都需要基于从这个主容器中查找，因此它们仅针对每个模块实例。

您可以通过使用find()和closest()之类的遍历来完成此操作。

<div class="table-responsive">
  <table class="table tab-logic"></table>
  <a class="add-button">
</div>

与编写jQuery插件一样，将所有代码包装在循环外部模块容器的each中。这个循环可以帮助我们隔离实例

var $containers = $('.table-responsive').each(function(){
     // assign variables for instance specific components

      // cache instance of this container so we don't do numerous searches for it in DOM
     var $cont = $(this),
         //there is only one table within this container         
         $table =$cont.find('table'),
         $rows = $table.children();

         // start adding events and use our cached instance collections from above
       var  $addBtn  = $cont.find('.add-button').click(function(){
            $rows.each(....

             .....
             // we know this is the instance specific table already
             $table.append(...
         });     


});

本指南可帮助您进行转换。这些模式在重复元素中非常常见，你会发现自己经常使用它们。

通过使用这种方法，如果您发现需要它，将整个事物转换为插件也是微不足道的

Answer 2

制作两个功能：一个用于添加行，一个用于删除行

运行1或2次的函数取决于你想要的行数。

在删除行中，您应检查允许的最小行数，这样您也可以删除行索引1，

目前第1行已修复

如何在不同的元素中使用相同的函数两次？

2 个答案: