Я работаю над таблицей, в которой первый столбец должен быть удален динамически с помощью jquery. После удаления первого col, tr-высота настраивается в соответствии с содержимым.
Я хочу, чтобы высота tr была одинаковой даже после удаления первого col. предложите ответ.
Это код, который я использую для удаления первого столбца
$(document).ready(function(){
$('.remove tr').each(function(){
$(this).find('td:first-child').remove();
$(this).find('th:first-child').remove();
})
})
Пожалуйста, ознакомьтесь с этой скрипкой
Добавьте строку-высоту: 0px, ширину и высоту в вашем CSS, например:
td,th{
border:1px solid #ccc;
line-height:0px;
height:40px;
width:100px;
}
Смотрите эту обновленную скрипту: Demo Hope это помогает.
нашел ответ в некотором отзывчивом дизайне стола
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]);
});
Спасибо всем
Вы можете добавить к своей фиксированной высоте в css или, если хотите, до удаления столбца, просто проверьте высоту строки в таблице и затем установите фиксированную высоту.
Перед удалением:
var trHeight = $('tr').height();
Затем добавьте новую высоту после удаления col:
$('tr').css('height', trHeight+'px');
EDIT: вы можете заменить 'tr' на 'th' или любой класс, который вы хотите
Я думаю, вы должны захватить ваши 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.