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个错误

删除属性ID
$（'＃hiddenTemplate'）。css（“visibility”，“visible”）;
请参阅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>

Jquery / CSS：更改克隆tr的css

2 个答案: