Jquery/CSS：更改克隆tr的css

Question

我試圖克隆隱藏的表格行，粘貼並使其可見。由於某些原因tr保持隱藏狀態。我嘗試過不同的方法，但最終我找不到解決方案。

這是我的代碼：

$(document).ready(function() { 
 
    $('#addproduct').click(function(e) { 
 
    e.preventDefault(); 
 
    var item = document.getElementById('hiddenTemplate').cloneNode(true); 
 
    $('#hiddenTemplate').after(item); 
 
    $('#hiddenTemplate').css("visibility", visible); 
 

 
    }); 
 
});

#hiddenTemplate { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button id="addproduct" class="btn btn-primary">Add Product</button> 
 

 
<table id="tableProducts"> 
 
    <tbody> 
 
    <tr> 
 
     <td><b>SKU</b>:</td> 
 
     <td><b>Default Quantity</b>:</td> 
 
     <td><b>Position</b>:</td> 
 
     <td><b>Is Default?</b></td> 
 
     <td><b>User Defined?</b></td> 
 
    </tr> 
 
    <tr id="hiddenTemplate"> 
 
     <td> 
 
     <input type="text" id="sku"> 
 
     </td> 
 
     <td> 
 
     <input type="text" id="quantity"> 
 
     </td> 
 
     <td> 
 
     <input type="text" id="position"> 
 
     </td> 
 
     <td> 
 
     <input type="radio" id="isDefault"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" id="userdefined"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

您的代碼缺少引號visible：

$('#hiddenTemplate').css("visibility", "visible"); 

（正如在評論中說，使用類，而不是一個id）

Answer 2

，其中有3個misstakes在你的代碼

1. 刪除屬性ID
2. $（ '＃hiddenTemplate'）的CSS（ 「知名度」， 「可見」）。
3. 看到2，做它$(item)

$(document).ready(function() 
 
{ 
 
    $('#addproduct').click(function (e) { 
 
     e.preventDefault(); 
 
     var item = document.getElementById('hiddenTemplate').cloneNode(true); 
 
     item.removeAttribute('id'); 
 
     $('#hiddenTemplate').after(item); 
 
     $(item).css("visibility", "visible"); 
 
    }); 
 
});

#hiddenTemplate 
 
{ 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="addproduct" class="btn btn-primary">Add Product</button> 
 

 
<table id="tableProducts"> 
 
     <tbody> 
 
     <tr> 
 
      <td><b>SKU</b>:</td> 
 
      <td><b>Default Quantity</b>:</td> 
 
      <td><b>Position</b>:</td> 
 
      <td><b>Is Default?</b></td> 
 
      <td><b>User Defined?</b></td> 
 
     </tr> 
 
     <tr id="hiddenTemplate"> 
 
      <td> 
 
       <input type="text" id="sku"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="quantity"> 
 
      </td> 
 
      <td> 
 
       <input type="text" id="position"> 
 
      </td> 
 
      <td> 
 
       <input type="radio" id="isDefault"> 
 
      </td> 
 
      <td> 
 
       <input type="checkbox" id="userdefined"> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
</table>