Вопрос по javascript, css, html, jquery – Высота ТД на двух отдельных столах

7

У меня есть две отдельные таблицы, в которых я использую функцию focus + hover для каждого tr, который отлично работает одновременно на обеих таблицах, моя проблема с td height, потому что если описание td from fist table будет больше, оно будет отображаться в двух строках в то же самое td и высота td будут изменены, но только в первую таблицу td. Как можно запомнить высоту тд от первой таблицы и добавить ее на тд второй таблицы, чтобы оба тд были одинакового размера. В моем примере только первые два tr отображаются нормально, остальные два отображаются не нормально из-за описания первой таблицы td.

fiddle example: http://jsfiddle.net/Ksb2W/45/

   for bounty  please check this example to see the difference on chrome and ie8:

http://mainpage.ueuo.com/

Спасибо.

Как правило, если вы дойдете до конца своего вопроса, не добавив вопросительный знак (?), Вы, вероятно, не должны его публиковать. Anthony Grist
@mcmwhfy Пожалуйста, смотрите мой обновленный ответ для решения вашей проблемы. Rory McCrossan
элемент td изменяет свой размер на основе данных, поэтому второй td не получает такую же высоту, как первый td, и это невозможно Muhammad Raheel
в чем именно вопрос? Alnitak

Ваш Ответ

7   ответов
2

что вы хотите, вы можете иметь только одну таблицу с пустым столбцом без границы между двумя частями. Таким образом, высота ячейки будет по-прежнему динамической в зависимости от содержимого, но также будет занимать все ячейки в строке с обеих сторон таблицы.

3

tr элементы, а затем установить высоту всехtrс этой высоты:

// get all heights
var heights = rows.map(function () {
    return $(this).height();
}).get();

// use max to get the max !
var maxHeight = Math.max.apply(null, heights);

// set the height
rows.height(maxHeight);

Рабочий пример

(Я думаю, что, возможно, неправильно понял ваш вопрос ... это установит высоту всехtrс той же высоты)

Можно ли добавить эту высоту тд только для затронутой тд тд? потому что теперь применяет эту высоту ко всем тд '(( mcmwhfy
2

$(function(){
    var rows = $('.interactive tr');

    rows.click(function () {
        var i = $(this).GetIndex() + 1; // nth-child is 1-based

        rows.removeClass('selectedRow');
        rows.filter(':nth-child(' + i + ')').addClass('selectedRow').height($(this).children('td')[0].offsetHeight);
    });

    rows.hover(function(){
        var i = $(this).GetIndex() + 1;
        rows.filter(':nth-child(' + i + ')').addClass('hoverx').height($(this).children('td')[0].offsetHeight);;
    },function(){         
        rows.removeClass('hoverx');
    });
});

jQuery.fn.GetIndex = function(){
    return $(this).parent().children().index($(this));
}
2
    $('#t1 tr').each(function(i) {
    if ($(this).height() > $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
        $('#t2 tr:nth-child(' + (i + 1) + ')').height($(this).height());
    else if ($(this).height() < $('#t2 tr:nth-child(' + (i + 1) + ')').height()) 
        $(this).height($('#t2 tr:nth-child(' + (i + 1) + ')').height());
});

ЕСЛИ ее соответствует больше. В этом случае вы должны указать свои таблицы. Как в этой скрипке:http://jsfiddle.net/Ksb2W/88/

Большое спасибо за ответ! mcmwhfy
3

кода:

var rows1 = $("#first tr");
var rows2 = $("#second tr");

rows1.each(function() {
    $(rows2[$(this).index()]).height($(this).height());        
})

Вот работает jsFiddle:http://jsfiddle.net/Ksb2W/51/

2

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

http://jsfiddle.net/Ksb2W/54/

Вы можете поместить эту строку кода в функцию document.ready, и она должна сделать свое дело:

$(function(){
    $('#c').attr('height', $('#b').css('height'));
});

Также важно изменить CSS для<td> элементы с этим свойством:

box-sizing:        border-box;

Вот надежное решение, которое будет соответствовать всем высотам строк в 2 таблицах, указанных в таблицеid, 4 строки в функции document.ready, нет необходимости напрямую изменять CSS:

$('td').css('box-sizing','border-box');
$('#t2').children().children().each(function(i, value) {
    $(this, ':nth-child(1)').attr('height', $('#t1').children().children(':nth-child(' + parseInt(i + 1) + ')').css('height'));
});

Смотрите скрипку здесь:http://jsfiddle.net/Ksb2W/55/

22

вы хотите, чтобы высоты в каждой строке обеих таблиц были одинаковыми?

Если так, это должно работать:

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).height());
});

Очевидно, что использование:first а также:last селекторы не идеальны, вы должны изменить их, чтобыid селекторы.

Example fiddle

UPDATE

Решение проблемы, о которой вы упомянули в своей награде, заключается в том, что границаtd элементы не учитываются.

замещатьheight() сouterHeight() при проверке текущей строки она должна работать нормально:

$("table:first tr").each(function(i) {
    $("table:last tr").eq(i).height($(this).outerHeight());
});
@Rory McCrossan еще один вопрос :) что я могу сделать, чтобы улучшить производительность IE 8 при вызове этой функции, потому что она немного медленнее в этом глупом браузере. mcmwhfy
спасибо большое, это лучшее решение для моего проекта. mcmwhfy
+1 совершенно просто ... я сделал всеtr элементы одинаковой высоты !! дох !!
Еще раз спасибо Рори МакКроссан, ваше решение исправило мою проблему !!! позвольте мне немного проверить, и я дам вам все очки. mcmwhfy
Не много на самом деле. Яваскриптный движок IE работает ужасно медленно - этого я почти и боюсь. Вы могли бы преобразовать вышеупомянутое в нативный JavaScript, но я не думаю, что это будет заметно быстрее.

Похожие вопросы