Форум

Ольга Алешина · #1 (**permalink**) 29.06.2017, 12:20

Всем здравствуйте!
Есть такая проблема:
в цикле выполняются следующие действия:

for (int i=0; i < data.length; i++) {
var str = "<tr id = \"" + i + "\" style=\"height:23px;\">";
str = str + "<td>" + data.text[i] + "</td></tr>";
$('#bodyTable').append(str);
}

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

После завершения цикла мне нужно использовать высоту строки. Беру, к примеру, высоту первой строки. Она у меня почему-то 28px вместо заданных в style 23px. Однако два подряд вызова alert'ов с проверкой высоты дают разные результаты. Т.е. текст в JS:

alert($('#0').css('height'));
alert($('#0').css('height'));

показывает 28px и 23px.

Если я задаю в style значение больше или равное 28, к примеру 30, то:

alert($('#0').css('height'));
alert($('#0').css('height'));

показывают оба 30px.

Такое ощущение, что где-то какая-то задержка, асинхронность что ли идет. Сначала высота равна взятой откуда-то высоте 28 (м.б. по размеру текста в ячейки), однако затем она все-таки становится равной 23, причем текст в ней спокойно помещается.
В чем причина и как решить проблему?

P.S. Этот javascript рисует некую картинку в браузере. Переход на страницу, на которой рисуется эта картинка и отрабатывает указанный скрипт, осуществляется с другой jsp по нажатию на кнопку. Так вот в этом случае скрипт отрабатывает правильно и оба алерта дают значение 23px. Если же я нахожусь на странице и нажимаю ctrl-F5, то вот в этом случае первый алерт показывает 28px, а второй 23px.

laimas · #2 (**permalink**) 29.06.2017, 13:07

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    var d = ['aaa', 'bbb'];
    for (var i=0; i < d.length; i++) {
        var str = '<tr style="height:23px"><td>' + d[i] + '</td></tr>';
        $('#tbl').append(str);
    }
    alert($.map($('tr'), function(e, i) {
        return i + ' = ' + $(e).height()
    }))
});
</script>
</head>
<body>
<table id="tbl"></table>
</body>
</html>

Ольга Алешина · #3 (**permalink**) 29.06.2017, 14:29

Проблема решилась обновлением браузера (Firefox) с версии 44.0 на 54.0.

Форум

Справочник

Discord чат

Курсы javascript