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

回答

相關問題