Сохранить высоту 'tr' таблицы после удаления первого столбца

0

Я работаю над таблицей, в которой первый столбец должен быть удален динамически с помощью jquery. После удаления первого col, tr-высота настраивается в соответствии с содержимым.

Я хочу, чтобы высота tr была одинаковой даже после удаления первого col. предложите ответ.

Это код, который я использую для удаления первого столбца

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

Пожалуйста, ознакомьтесь с этой скрипкой

  • 0
    Получите высоту tr и примените ее через .CSS перед удалением клеток. tr высота будет выступать в качестве минимальной высоты, поскольку таблицы сжимаются / расширяются до своего содержимого.
Теги:
table

4 ответа

1

Добавьте строку-высоту: 0px, ширину и высоту в вашем CSS, например:

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

Смотрите эту обновленную скрипту: Demo Hope это помогает.

  • 0
    Смотрите эту обновленную скрипку: jsfiddle.net/zWCz8/2
  • 0
    В качестве хорошей практики вы должны опубликовать демонстрационную ссылку в ANS
Показать ещё 4 комментария
0

нашел ответ в некотором отзывчивом дизайне стола

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]);
});

Спасибо всем

0

Вы можете добавить к своей фиксированной высоте в css или, если хотите, до удаления столбца, просто проверьте высоту строки в таблице и затем установите фиксированную высоту.

Перед удалением:

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

Затем добавьте новую высоту после удаления col:

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

EDIT: вы можете заменить 'tr' на 'th' или любой класс, который вы хотите

0

Я думаю, вы должны захватить ваши 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);
})

Вы можете, конечно, выбрать захват высоты td и th в отдельных переменных js.

  • 0
    это отражается только для первых тр

Ещё вопросы

Сообщество Overcoder
Наверх
Меню