如果表标题不存在,请将第一个子项移动为

时间:2017-07-11 08:20:28

标签: javascript jquery html-table

假设我有以下表格格式,我想检查表格是否有thead th。如果表格中没有thead th,则tbody tr的第一个子项将移动为thead th

如何检查表格是否包含标题?

$(function() {
  var th = $('table tbody tr:first td').map(function(i, e) {
    return $('<th>').append(e.textContent).get(0);
  });
  $('table').prepend($('<thead>').append(th)).find('tr:first').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 4</th>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分:2)

您可以通过选择它并检查生成的jQuery对象的Invalid Host header属性来检查thead是否存在。

请注意,您需要使用length元素将th附加到新的thead。我还修改了你的代码,以便在DOM中有多个表的情况下工作。试试这个:

tr
$(function() {
  $('table').each(function() {
    var $table = $(this);
    if ($table.find('thead').length)
      return;

    var th = $table.find('tbody tr:first td').map(function(i, e) {
      return $('<th />').append(e.textContent).get(0);
    });
    var $tr = $('<tr />').append(th);
    var $thead = $('<thead />').append($tr);
    $table.prepend($thead).find('tbody tr:first').remove();
  });
});