html的jquery克隆答案

【问题标题】：Jquery clone of htmlhtml的jquery克隆
【发布时间】：2017-05-31 02:08:21
【问题描述】：

尝试学习和理解克隆 html。所以我有一些 HTML，我从我创建的 json 测试提要中获取假期......基本......有一个日期和假期名称。

<table id="holidayTable" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="holidayDateHead">Holiday Date</th>
            <th class="holidayNameHead">Holiday Name</th>
        </tr>
    </thead>
    <tbody> 
    <tr id="emptyRow" class="tableRow">
        <td class="holidayDate"></td>
        <td class="holidayName"></td>
    </tr>   
    </tbody>
</table>

我正在做一个 ajax 来获取 json 并使用它来完成它。

var holidayCount = 0;  //Count of Items.
        $(HolidayData).each(function(index, Holidays) {

            var date = Holidays.holidayDate.replace(/(\d{4})-(\d{2})-(\d{2})(.*)/g, '$2/$3/$1');
            var templateClone = $("#emptyRow .tableRow").clone()[0];

            $(".holidayDate", templateClone).text(date);
            $(".holidayName", templateClone).text(Holidays.name);

            $("#holidayTable").append(templateClone);

            holidayCount++;
        });

但是这似乎不能正常工作，不知道为什么.....我可以控制台记录计数，我得到 10....这是我放入 json 中的假期数....但是它只在网页中显示 1。我在控制台中没有看到任何错误......所以没有什么能让我知道它为什么不工作。

任何人都可以对此有所了解以帮助我更好地理解这一点吗？

【问题讨论】：

标签： jquery html clone

【解决方案1】：

我简化了你的例子并且可以工作：

单击 id="clone" 的按钮时，空行被克隆，填充数据并作为新行附加到表中：

$('#clone').on('click',function() {

 var templateClone = $("#emptyRow").clone();

   $(".holidayDate", templateClone).text('24.12.2015');
   $(".holidayName", templateClone).text('Christmas');

   templateClone.appendTo("#holidayTable tbody");
});

如果您想亲自尝试，请访问这个 plunker： https://embed.plnkr.co/8EmVxUkg2VNOYvLqTPZl/

【讨论】：

这很棒....这行得通....但是我想知道......当我在 chrome 中查看它时有一个空行....应该隐藏一旦数据填充模板？我将更仔细地研究这一点，以更好地了解这是如何完成的。
好的......我让一切正常工作......我最终使用 jquery 删除了第一个 tr，因为我可以在 chrome 中看到它，它在名称和数据之间有一个很小的空间。我还使用 jquery 来删除所有相同的 id (#emptyRow)。仍在玩和尝试这个。

【解决方案2】：

改变这个

var templateClone = $("#emptyRow .tableRow").clone()[0];

到

var templateClone = $("#emptyRow .tableRow").first().clone();

原因：使用 [0] 确实返回 HTML-DOM-element 而不是 jquery-object。

【讨论】：