jquery - 卡住第一列和细节

Question

我有一个表格，我需要能够粘贴第一列和与之相关的详细信息。单元格需要能够垂直增长以显示隐藏列表，并且子 div 绝对位于它旁边。为了达到这种效果，我相对定位了表格单元格。行为可以在这里看到:

http://jsfiddle.net/vmo28zz4/1/

.headcol {
    position: relative;
    background-color:white;
}

这样一来，我就无法像在其他示例中那样绝对定位单元格。如果有另一种方法可以实现我的扩展器/细节的预期效果，我也会对此持开放态度。谢谢。

Answer 1

添加这些样式:

.content tr::before {
  content: '';
  display: block;
}

.content td:first-child {
  position: absolute;
}

改变 updateDetailWidths() 如下:

function updateDetailWidths() {
  var mw= 0;
  $('.content td:first-child')
    .each(function() {
      mw= Math.max(mw, $(this).width());
      $(this).parent().height($(this).height());
    })
    .width(mw);
  $('<style>.content tr::before{width:'+mw+'px}</style>').appendTo('head');
  $('.headcol-detail').width($('.content').innerWidth()-mw);
}

在点击处理程序的末尾添加以下代码:

$('td > div:first-child').click(function () {
  ...
  var tr= $(this).closest('tr');
  tr.height($('td:first', tr).height());
});

Fiddle

这会执行以下操作:

1. 使绝对定位的第一个 td 具有相同的宽度。
2. 将每一行设置为其第一个 td 的高度。
3. 向每个 tr 添加伪元素，将第二个和后续 td 推到绝对定位的第一个 td 的右侧>.