将含隐藏列的.src-table数据转移至.target-table并显示原隐藏列

我需要实现数据从一个表格转移到另一个表格的功能，当前代码能正常运行，但存在问题：.src-table中的部分列处于隐藏状态，转移到.target-table后，原本隐藏的列依然是隐藏的，我希望这些列在目标表格中显示出来。

原代码示例 #

JavaScript

$(function () {
  $(document).on("click", "#submit", function () {
    var getSelectedRows = $(".src-table input:checked").parents("tr").clone();
    $(".target-table tbody").append(getSelectedRows);
  })
})

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Source table</h3>
<table class="src-table">
  <tr>
    <th>Select</th>
    <th hidden="hidden">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td hidden="hidden">Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td hidden="hidden">Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
<br>
<input type="button" value="Submit" id="submit"> 
<h3> Target table </h3>
<table class="target-table">
  <tr>
    <th>Select</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
</table>

解决方案 #

问题根源是克隆行时，源行里的<td>元素会保留hidden属性，导致克隆后依然隐藏。只需要在克隆完成后，移除这些元素的hidden属性即可。

修改后的JavaScript代码：

$(function () {
  $(document).on("click", "#submit", function () {
    var getSelectedRows = $(".src-table input:checked").parents("tr").clone();
    // 移除克隆行中所有带hidden属性的元素的该属性
    getSelectedRows.find('[hidden]').removeAttr('hidden');
    $(".target-table tbody").append(getSelectedRows);
  })
})

或者也可以使用prop方法来设置属性值为false，效果一致：

getSelectedRows.find('[hidden]').prop('hidden', false);

这样处理后，原本在源表格中隐藏的列，添加到目标表格后就会正常显示了。

内容的提问来源于stack exchange，提问作者Jewelserniabad