javascript - 使用 jquery 编辑表中特定行的 colspan 属性

Question

我的页面中有一个 HTML 表格。像这样

<table class="table table-bordered table-responsive">
    <thead>
    <tr class="tablewhite">
        <th>&nbsp;No</th>
        <th>Options</th>
        <th>Dash</th>
        <th>mm</th>
        <th>Inch</th>
        <th>mm</th>
        <th>mm</th>
    </tr>
    </thead>
    <tbody>
    <tr class="tablecontentwhite">
        <td>19904408</td>
        <td>S/G</td>
        <td>-4</td>
        <td>4.4</td>
        <td>5/16"</td>
        <td>7.9</td>
        <td>20.0</td>
    </tr>
    <tr class="tablecontentblue">
        <td>&nbsp;Material: Acidproof Stainless Steel with bronze inserted thread.</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="tablecontentwhite">
        <td>&nbsp;-  K=Clevis Pin Treaded w/Nut, G=Clevis Pin w/G-ring</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    </tbody>
</table>

表格的最后三行可能在结构上有所不同。就像我在上面显示的那样，最后两行仅在第一列中有文本。如果只有该列的第一列有文字，我想给它最大宽度。在这种情况下，将 colspan="7" 添加到包含文本的列中，并删除该行中的所有空列。期望的输出将是这样的

<table class="table table-bordered table-responsive">
  <thead>
    <tr class="tablewhite">
      <th>&nbsp;No</th>
      <th>Options</th>
      <th>Dash</th>
      <th>mm</th>
      <th>Inch</th>
      <th>mm</th>
      <th>mm</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tablecontentwhite">
      <td>19904408</td>
      <td>S/G</td>
      <td>-4</td>
      <td>4.4</td>
      <td>5/16"</td>
      <td>7.9</td>
      <td>20.0</td>
    </tr>
    <tr class="tablecontentblue">
      <td colspan="7">&nbsp;Material: Acidproof Stainless Steel with bronze inserted thread.</td>

    </tr>
    <tr class="tablecontentwhite">
      <td colspan="7">&nbsp;- K=Clevis Pin Treaded w/Nut, G=Clevis Pin w/G-ring</td>

    </tr>

  </tbody>
</table>

谁能指出实现这一目标的正确方法？

Answer 1

只是提供一个想法。你可以试试这个。适用于下一个空元素。

    $('tr').each(function(index, tr) {
    var previous = false;
    $(tr).find('td').each(function(index1, td) {
        if(td.innerText == "") {
            if(previous) {
                var p = $(previous);
                if(!p.attr('colspan')) {
                    p.attr('colspan', 1);
                }
                p.attr('colspan', parseInt(p.attr('colspan'))+1);
                $(td).remove();
            }
        } else {
            previous = td;
        }
    });
});

你也可以这样写

 $('tr').each(function(index, tr) {
    $(this).find('td:not(:empty)').attr('colspan', $(this).find('td:empty').length);
    $(this).find('td:empty').remove();
});

要拆分单元格长度，您可以更改第二行

$(this).find('td:not(:empty)').attr('colspan', $(this).find('td:empty').length/$(this).find('td:not(:empty)'));

http://jsfiddle.net/Lmtx2ncq/