Question

在JQuery或JavaScript中是否可以找到其表中列占用最大空间的HTML表格的行。

如下图所示

代表第1列，第3行占用最大空间
对于第2列，第1行占用最大空间
对于第3列，第2行占用最大空间

Answer 1

td s的宽度相同。您必须使用 div 添加包装器display: inline-block。这将强制div使用内容。

然后你必须在columns上再次遍历它rows并忽略标题并计算宽度并添加类

$(function() {
  var $tr = $("table tr").not(':eq(0)');
  var len = $tr.eq(1).find('td').length;
  for (var col = 0; col < len; col++) {
    var _el = null;
    var _width = 0;
    for (var row = 0; row < $tr.length; row++) {
      var curEl = $tr.eq(row).find('td:eq(' + (col) + ')');
      var divWidth = curEl.find('div:first').width()
      if (divWidth > _width) {
        _width = divWidth;
        _el = curEl
      }
    }
    _el.addClass('red-border')
  }
})

.red-border {
  border: 1px solid red;
}
table div {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Table Header11</th>
    <th>Table Header11111</th>
    <th>Table Header111</th>
  </tr>
  <tr>
    <td>
      <div>
        Table cell111
      </div>
    </td>
    <td>
      <div>
        Table cell1111
      </div>
    </td>
    <td>
      <div>
        Table cell111111
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        Table cell11111</div>
    </td>
    <td>
      <div>
        Table cell111
      </div>
    </td>
    <td>
      <div>
        Table cell11
      </div>
    </td>
  </tr>
</table>

注意：我很懒，所以我在css table div中添加了这个。请添加自定义类或不覆盖所有内容的正确选择器

找到占用最大空间的列？

1 个答案: