如果行具有较少的列,则将colspan添加到动态表行的最后一个单元格

时间:2015-04-03 16:05:31

标签: jquery html-table dynamic-tables

也许以前曾经问过这个问题,但我的搜索量并没有提高我的需求......

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

所以我的问题是,如何在表中获得最多的列,并将colspan添加到包含较少列的行的最后一个单元格中以填充该平衡?

2 个答案:

答案 0 :(得分:2)

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

在此代码段中,点击填充按钮,将每行中最后一个单元格中的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>

答案 1 :(得分:0)

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

Here is the jsFiddle

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

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

希望我理解你的问题。如果要在一个表本身中显示3列和4列,则需要将代码修改为

this JSFiddle

希望您的问题得到解答。