如果一行中只有一个可见的表格单元格，如何动态添加 .attr('colspan', '100') ？答案

【问题标题】：How can I add .attr('colspan', '100') dynamically if only one visible table cell in a row?如果一行中只有一个可见的表格单元格，如何动态添加 .attr('colspan', '100') ？
【发布时间】：2018-08-31 19:03:25
【问题描述】：

正如标题所示，我想使用 jquery 将colspan="100" 动态添加到表格行中的任何单独的单元格中。

我正在使用 wordpress 插件向页面添加表格，但它不允许使用 colspan，因此我使用 jquery 隐藏任何空单元格。当一行中只使用一个单元格时，就会出现此问题。我希望它跨越 100%。

我需要能够计算每一行中的每个可见单元格，如果只有一个，请将.attr('colspan', '100') 添加到该单元格中，以便它填满该行。

有什么想法吗？谢谢

这是我用 wordpress 生成的。

$(document).ready(function() {
  $('.curriculum table tr').each(function() {

    $('td').each(function() {
      var cellText = $.trim($(this).text());
      var $cellExp = $(this).closest('td').prev();

      if (cellText.length == 0) {
        $(this).hide();
        $cellExp.attr('colspan', '2');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">
  <table class="table  table-responsive">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

如果只有一个可见单元格，您是要添加一整行空行还是要让这个可见单元格获取整行？
是的，所以如果该行包含一个包含信息的单元格，我想删除该行中的所有空单元格并用 colspan,100 展开填充的行
添加了解决方案。你能检查一下吗？

标签： jquery html wordpress html-table

【解决方案1】：

这是一个脚本。

    $(document).ready(function () {
        $('.curriculum table tr').each(function () {
           $('td').each(function () {
            var cellText = $.trim($(this).text());

            if (cellText.length == 0) {
                $(this).remove();
            }
           });
          if ($(this).children("td").length == 1) {
            $(this).children("td").attr("colspan", "100")
        }
        });
    });

Codepen

【讨论】：

谢谢。不幸的是，这会将 colspan,100 添加到每个单元格，而不仅仅是行中独立的单元格。
我已经更新了我的答案。它现在工作正常。请检查。 @MarkFeltwell “;”有一个错误在 if 语句之后。 :)

【解决方案2】：

我将从后面跟着一个空单元格的所有单元格开始，然后删除后面的所有空单元格，同时添加 colspan（代码中的 cmets）：

$('td').filter(function() {
  return $(this).next().text().trim() === ''; // get all tds that have an empty cell after them
}).each(function() {
  var $original = $(this); // get the original cell

  if (!$original.hasClass('remove')) { // check if the cell has already been marked for removal
    var counter = 1,
      $item = $original;

    do {
      if ($item.next().text().trim() === '') {
        // next cell is empty, increment colspan and reset do...while for next cell
        counter++;
        $item = $item.next().addClass('remove');
      }
    } while ($item.next().length && $item.next().text().trim() === '');

    $original.attr('colspan', counter); // set the colspan on the first cell
  }
});

$('.remove').remove();

// merge any previous empty cells
$('td').filter(function() {
  $prev = $(this).prev();
  return $prev.length && $prev.text().trim() === ''; // get all tds that have an empty cell before them - should only be ones that start the row
}).each(function() {
  var $original = $(this),
    $prev = $original.prev();
 
  var colspan = getColspan($original) + getColspan($prev); 
  $original.attr('colspan', colspan);
  $prev.remove();
});

function getColspan($elem) {
  var attr = $elem.attr('colspan');

  if (typeof attr !== typeof undefined && attr !== false) {
    return parseInt(attr);
  }

  return 1;
}

td {
  vertical-align: top;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">
  <table class="table  table-responsive">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案3】：

一开始使用colspan = 100 并不是一个好的解决方案。计算 max td count 然后将其用作 colspan 可能是一个更好的主意。如果您不想在一行中有超过 1 个可见单元格时隐藏其他单元格，您可以轻松修改此代码来实现它。

$(document).ready(function() {
var maxTdCount = 0;
  $('.curriculum table tr').each(function() {
    $('td').each(function() {
      var cellText = $.trim($(this).text());

      if (cellText.length == 0) {
        $(this).hide();
      }
    });
    if($(this).find("td:visible").length > maxTdCount)
    {    maxTdCount = $(this).find("td").length;}
  });
  $('.curriculum table tr').each(function() {
  if($(this).find("td:visible").length == 1)
    {
    	$(this).find("td").attr("colspan", maxTdCount);
    }
    });
});

td{border:1px solid black}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">
<table>
  <tbody>
    <tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
</tr>
<tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
</tr>
<tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
    </tr>
   </tbody>
 </table>
</div>

【讨论】：

太棒了！再加上我写的脚本，我想要它。谢谢