Question

我目前正在使用jQuery动态删除第一列的表。删除第一列后，tr高度根据内容自行调整。

我希望即使删除第一列后tr高度也相同。请提出答案。

这是我用来删除第一列的代码：

$(document).ready(function(){
    $('.remove tr').each(function(){
  $(this).find('td:first-child').remove();
  $(this).find('th:first-child').remove();
    })
})

请参阅此Fiddle

Answer 1

在css中添加行高：0px，宽度和高度，如下所示：

td,th{
   border:1px solid #ccc;
   line-height:0px;
   height:40px;
   width:100px;
  }

看到这个更新的小提琴：Demo 希望这会有所帮助。

Answer 2

您可以在css中添加tr固定高度，或者如果您想删除col之前，只需检查表格行的高度，然后设置固定高度。

删除之前：

var trHeight = $('tr').height();

然后在删除col：

后添加新的高度

$('tr').css('height', trHeight+'px');

编辑：您可以替换＆＃39; tr＆＃39;与'＆＃39;或任何你想要的课程

Answer 3

我认为您应该在删除之前捕获tr高度。所以，我在你的jsFiddle中尝试了一下，如果我改变了它，它对我有用

$(document).ready(function(){
    $('.remove tr').each(function(){
  $(this).find('td:first-child').remove();
  $(this).find('th:first-child').remove();
    })
})

到

$(document).ready(function(){
    var tr_height = $('.remove tr').height();
    $('.remove tr').each(function(){
      $(this).find('td:first-child').remove();
      $(this).find('th:first-child').remove();      
    })
    $('td:first-child, th:first-child').css('height', tr_height);
})

您当然可以选择在单独的js变量中捕获td和th的高度。

Answer 4

在一些响应表设计中找到答案

var cloned = $('.remove').clone().addClass('cloned');
$('.remove tr').each(function(){
$(this).find('td:first-child').remove();
$(this).find('th:first-child').remove();
})
var tr = $('.remove').find('tr');
var tr_copy = $('.cloned').find('tr');
var heights = [];
tr.each(function (index) {
var self = $(this),
tx = self.find('th, td');
tx.each(function () {
var height = $(this).outerHeight(true);
heights[index] = heights[index] || 0;
if (height > heights[index]) heights[index] = height;
});
});
tr_copy.each(function (index) {                 $(this).height(heights[index]);
});

全部谢谢

删除第一列后保留表的'tr'高度

4 个答案: