Просмотр полной версии : Покрасить динамическую таблицу
Здравствуйте
Есть скрипт (фрагмент)
$.each(my_orders, function() {
html_orders += '<tr>';
html_orders += '<td>'+this.id_order+'</td>';
html_orders += '</tr>';
});
, который вставляет строки в таблицу:
<table class="tablem">
<tbody>
</tbody>
</table>
мне понадобилось покрасить строки этой таблицы. Для этого я вставил перед таблицей вот это
<style type="text/css">
.tablem.colored { background: #9999ff; }
</style>
а скрипт изменил так
$.each(my_orders, function() {
html_orders += '<tr class="colored">';
html_orders += '<td>'+this.id_order+'</td>';
html_orders += '</tr>';
});
В результате вместо покраски таблица съежилась в размерах на пол-экрана.
Нутром чувствую, что дело не в скрипте, но все равно решил спросить на этом форуме, потому что здесь на много больше адекватных людей, чем на многих других.
.tablem .colored
Профессор, извините, вы имели в виду пробел?
не помогло
Огонек,
background
.tablem .colored td, .tablem .colored{
background-color:#9999ff;
}
.tablem .colored td, .tablem .colored{
background-color:#9999ff;
}
Нее, дело не в этом. Тоже самое. Но заметил следующее:
У меня скрипт формирует таблицу при открытии страницы и при нажатии некоторых кнопок, так вот при открытии строки не красятся, а если нажать на кнопочку, которая обновляет список (не страницу), то строки красятся.
Но таблица сжата на пол-экрана все равно.
Огонек,
.tablem .colored td, .tablem .colored{
background-color:#9999ff;
}
можно и просто background
<html>
<head>
<meta charset="utf-8">
<style>
td{
background: red;
}
</style>
</head>
<body>
<table>
<tr><td>rrr</td><td>rrr</td><td>rrr</td></tr>
<tr><td>rrr</td><td>rrr</td><td>rrr</td></tr>
<tr><td>rrr</td><td>rrr</td><td>rrr</td></tr>
<tr><td>rrr</td><td>rrr</td><td>rrr</td></tr>
</table>
</body>
</html>
можно и просто background
Сообщение от Огонек
background
можно, но лучше не обнулять параметры, может выйти боком.
можно, но лучше не обнулять параметры, может выйти боком.
например?
можно и просто background
Покраски я добился, но она происходит только при повторном формировании таблицы по кнопке.
Уважаемый j0hnik
вы меня уже один раз спасли в другой теме, там я нарушил порядок следования элементов сверху вниз. Помня это <style> я уже и перед и после скрипта ставил. ???
Покраски я добился, но она происходит только при повторном формировании таблицы по кнопке.
Уважаемый
вы меня уже один раз спасли в другой теме, там я нарушил порядок следования элементов сверху вниз. Помня это <style> я уже и перед и после скрипта ставил. ???
Да, было дело.
Огонек, можно пример глянуть, так более понятно будет, ссылку или тут можно макетик сделать.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tablem .colored td, .tablem .colored{
background-color:#9999ff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var html_orders = "", my_orders = [{id_order: 1},{id_order: 5},{id_order:12}]
$.each(my_orders, function() {
html_orders += '<tr class="colored">';
html_orders += '<td>'+this.id_order+'</td>';
html_orders += '</tr>';
});
$(".tablem tbody").append(html_orders)
});
</script>
</head>
<body>
<table class="tablem">
<tbody>
</tbody>
</table>
</body>
</html>
например?
куда исчез фон картинкой?
.tablem .colored td, .tablem .colored{
background-image: url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
.tablem .colored td, .tablem .colored{
background:#9999ff;
}
куда исчез фон картинкой?
.tablem .colored td, .tablem .colored{
background-image: url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
.tablem .colored td, .tablem .colored{
background:#9999ff;
}
я понял о чем вы, но обычно так не делают, если используют сокращенную запись, делают так
.tablem .colored td, .tablem .colored{
background:#9999ff url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
}
делают так
куда исчез background-size: cover; и т.д. ??? :)
куда исчез background-size: cover; и т.д. ??? :)
.tablem .colored td, .tablem .colored{
background:#9999ff url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-size: cover;
}
пожалуйста =)
пожалуйста =)
Ежики плакали, кололись, но продолжали жрать кактус...
:)
Я не пропал - нашел причину неудач. Как только изменил tablem на tablem1? сразу все заработало. Мое изменение стиля не имеет приоритета над файлом css. Может такое быть?
Ежики плакали, кололись, но продолжали жрать кактус..
это ты про тех кто создал эту сокращенную запись? :-/
Может такое быть?
да, нужен тот же путь указать что в css файле или присвоить таблице id и тогда
#tablem .colored td, #tablem .colored{
background-color:#9999ff;
}
эту сокращенную запись?
это как поглядеть, может как раз не сокращённая, а полная :) , для указания всех параметров.
:)
это как поглядеть, может как раз не сокращённая, а полная :) , для указания всех параметров.
рони, где можно буквы экономить надо экономить :yes:
Хочу уточнить: Спасибо, господа.
где можно буквы экономить надо экономить
надо понимать, что перезапись 6 параметров в background, затратнее, чем одного в background-color.
надо понимать, что перезапись 6 параметров в background, затратнее, чем одного в background-color.
Будем учитывать.
вы имели в виду пробел?
не помогло
Помочь может только аспирин. ;) А .tablem.colored, это селектор эемента с составным классом "tablem colored", а не элемент с классом "colored", элемента с классом "tablem".
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot