Question

我想在已经不存在的表格中添加https://www.myadress.com/blabla?rel0&dataok。仅当thead元素存在且th父元素应为th's时才会生效。

运行代码后，表格第一行在浏览器中断开：

tr

可能是什么问题？我可以看到还添加了不必要的$(".node table").addClass('sticky-header'); var all_tables = $(".node table").filter(function() { return !$(this).find('thead').length && $(this).find('th').length; //add header if no thead is there but a th must be present }); all_tables.each(function() { var parent = $($(this).find('th')[0]).parent(); if (parent.is('tr')) { parent.css('border', '5px solid red'); //wrap the in thead parent.wrap('<thead> </thead>'); } else { //skip this table } });

原始表格如下：

tbody

渲染输出

呈现HTML

<table border="1" cellspacing="0" cellpadding="0" class="sticky-header">
  <tr>
    <th> State Name</th>
    <th> Local Customer Care Number</th>
  <tr>

  <tbody>
    <tr>
      <td> Madhya Pradesh &amp; Chhattisgarh</td>
      <td> 0755 4448080</td>
    </tr>
    <tr>
      <td> Uttar Pradesh</td>
      <td> 0522 4448080</td>
    </tr>
    <tr>
      <td> Karnataka</td>
      <td> 080 44448080</td>
    </tr>
    <tr>
      <td> Andhra Pradesh</td>
      <td> 040 44448080</td>
    </tr>
    <tr>
      <td> Mumbai</td>
      <td> 022 44448080</td>
    </tr>
    <tr>
      <td> Maharashtra</td>
      <td> 020 44448080</td>
    </tr>
    <tr>
      <td> Himachal Pradesh</td>
      <td> 08628048080</td>
    </tr>
    <tr>
      <td> Assam</td>
      <td> 08133848080</td>
    </tr>
    <tr>
      <td> Jammu &amp; Kashmir</td>
      <td> 09596748080</td>
    </tr>
    <tr>
      <td> Bihar &amp; Jharkhand</td>
      <td> 09955148080</td>
    </tr>
    <tr>
      <td> WB</td>
      <td> 033 44448080</td>
    </tr>
    <tr>
      <td> Delhi</td>
      <td> 011 44448080</td>
    </tr>
    <tr>
      <td> Tamil Nadu</td>
      <td> 044 44448080</td>
    </tr>
    <tr>
      <td> Kerala</td>
      <td> 0484 4448080</td>
    </tr>
    <tr>
      <td> Noth East</td>
      <td> 08132948080</td>
    </tr>
    <tr>
      <td> Haryana</td>
      <td> 0124 4448080</td>
    </tr>
    <tr>
      <td> Gujarat</td>
      <td> 079 44448080</td>
    </tr>
    <tr>
      <td> Rajasthan</td>
      <td> 0141 4448080</td>
    </tr>
    <tr>
      <td> Orissa</td>
      <td> 07077448080</td>
    </tr>
    <tr>
      <td> Punjab</td>
      <td> 0172 4448080</td>
    </tr>
  </tbody>
</table>

Answer 1

我认为你应该检查这一行

  return  !$(this).find('thead').length && $(this).find('th').length;

从我能理解的这应该是

  return  !$(this).find('thead').length && !$(this).find('th').length;

这是我第一眼看到的唯一不寻常的东西

Answer 2

我需要确定您的HTML，但我认为thead不止一次应用。看一下manual for jQuery's wrap函数。

直接使用此HTML结构手册中的示例：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

如果您使用wrap类对文档对象调用container，您实际上最终会得到这个：

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

注意wrap如何处理您调用wrap的父级内的每个HTML对象。我认为每个tr或td都会被另外的thead包裹，导致您的错误。

我认为您所寻找的是wrapAll function。

<强>更新
现在我们已经拥有了您的HTML，我非常有信心您的每个th都包含在thead中，如此：

<tr>
  <thead>
    <th>State Name</th>
  </thead>
  <thead>
    <th>Local Customer Care Number</th>
  </thead>
</tr>

替换

parent.wrap('<thead>   </thead>');

使用此代码

parent.wrapAll('<thead>   </thead>');

如果这不起作用，则抓住错误的父元素。基于您的HTML wrap将永远不适合您。不要忘记查看我之前链接的手册页。另外，我认为'<thead> </thead>'是错误的，因为我只需要'<thead>'手册，它就会自动关闭。我不使用jQuery，所以我不能帮助更多。

Answer 3

实际上，浏览器会自动添加tbody标记。因此，此thead已落入tbody，然后Chrome会为其余行添加另一个tbody。最后2 tbody's

我刚刚在parent.wrap之后添加了这一行，它运行正常：

parent.parent().prependTo($(this));

添加标题后的表格中断

渲染输出

呈现HTML

3 个答案: