javascript - 查找占用最大空间的列？

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

如下图所示


对于第1列，第3行占用了最大空间
对于第2列，第一行占用了最大空间
对于第3列，第二行占用了最大空间

最佳答案

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

然后，您将不得不在columns上循环并再次在rows内循环，并忽略标题并计算宽度并添加类

Updated Fiddle

$(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中添加了它。请添加一个不会覆盖所有内容的自定义类或适当的选择器

关于javascript - 查找占用最大空间的列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40395671/