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

Question

正如标题所示，我想使用 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>

Answer 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