jquery clone的html

试图学习和理解克隆html。所以我有一些HTML，我从我创建的json测试Feed获取假期.... basic ...有一个日期和假日名称。jquery clone的html

<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++; 
     });

然而，这似乎没有工作权，不知道为什么.....我可以CONSOLE.LOG计数和我得到10 ....这是F假期我把在JSON数。 ...但它只在网页中显示1。我没有看到控制台中的任何错误....所以没有给我一个关于为什么它不工作的想法。

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

来源

2017-05-31 SteveL

我简化你的榜样，可以让工作：

在点击id为“克隆”的空行按钮被克隆，充满了数据和附加为新行表：

$('#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/

来源

2017-06-01 16:07:34

这是伟大的....这工作.....但想知道.....有一个空行，当我看着它在铬....应该隐藏一旦数据填充模板？我将更密切地关注这一点，以更好地了解如何完成此操作。 – SteveL

好的...我得到了一切工作....我最终删除了第一个使用jquery的tr，因为我可以看到在chrome中它的名称和数据之间有一个小空间。我也使用jquery删除所有相同的ID（#emptyRow）。仍然在玩这个实验。 – SteveL

更改此

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

到

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

原因是：使用[0]并返回一个HTML的DOM元素，而不是一个jquery对象。

来源

2017-06-01 00:45:14

尝试和改变你的建议....但没有奏效。 – SteveL

jquery clone的html

回答

相关问题