如果行的列较少，则将 colspan 添加到动态表行的最后一个单元格答案

【问题标题】：Add colspan to last cell of dynamic table row if row has fewer columns如果行的列较少，则将 colspan 添加到动态表行的最后一个单元格
【发布时间】：2015-04-03 16:05:30
【问题描述】：

也许以前有人问过这个问题，但我的许多谷歌搜索并没有满足我的需求......

我有一个动态创建的表。其中包含具有 4 列的行和具有 3 列的行。我想要做的是将行的最后一个单元格与表格最右侧的 3 列对齐。我认为最好的方法是将 colspan="2" 添加到 3 列行的最后一列。

所以我的问题是，我怎样才能在表格中获得最多的列数，并在包含较少列的行的最后一个单元格中添加一个 colspan 以填补该余额？

【问题讨论】：

标签： jquery html-table dynamic-tables

【解决方案1】：

您无需为单个单元格设置colspans。只需为每行的最后一个单元格使用一个大数字。它不会给表格增加任何额外的空间。

在此代码段中，单击填充按钮将每行最后一个单元格中的colspan 设置为999：

$('button').click(function() {
  $('table tr').find('td:last').attr('colspan',999);
});

table {
  font: 14px verdana;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid #aaa;
  padding: 0.2em;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Fill</button>
<table>
  <tr><td>Lorem <td>ipsum <td>dolor <td>sit
  <tr><td>amet, <td>consectetur <td>adipiscing <td>elit, <td>sed <td>do
  <tr><td>eiusmod <td>tempor <td>incididunt <td>ut <td>labore
  <tr><td>et <td>dolore <td>magna
  <tr><td>aliqua.
</table>

【讨论】：

真是天才！我从来不知道你能做到这一点:)
当然。我也不知道。跳出框框思考的方式。这对我来说非常有效。非常感谢。

【解决方案2】：

最好的办法是创建动态表。

Here is the jsFiddle

如果您的问题是关于查找行的列数，那么这就是命令。

$("#columnCount").append($("#setTable tr:eq(1) td").length);

希望我理解你的问题。如果你想在一个表本身显示3列和4列，那么代码需要修改为

this JSFiddle。

希望您的问题得到解答。

【讨论】：

这并没有真正解决问题中的问题。
感谢您的反馈。这不仅仅是找出行中单元格的数量，而是将 colspan 与单元格较少的行与较大的行进行匹配。瑞克上面的回答解决了这个问题。再次感谢！