Покрасить динамическую таблицу
Здравствуйте
Есть скрипт (фрагмент)
$.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
|
Цитата:
не помогло |
Огонек,
Цитата:
.tablem .colored td, .tablem .colored{
background-color:#9999ff;
}
|
Цитата:
У меня скрипт формирует таблицу при открытии страницы и при нажатии некоторых кнопок, так вот при открытии строки не красятся, а если нажать на кнопочку, которая обновляет список (не страницу), то строки красятся. Но таблица сжата на пол-экрана все равно. |
Цитата:
<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>
|
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Уважаемый Цитата:
|
Цитата:
|
Огонек, можно пример глянуть, так более понятно будет, ссылку или тут можно макетик сделать.
|
<!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([url]https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);[/url]
}
.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);
}
|
Цитата:
|
Цитата:
.tablem .colored td, .tablem .colored{
background:#9999ff url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-size: cover;
}
пожалуйста =) |
Цитата:
Цитата:
|
Я не пропал - нашел причину неудач. Как только изменил tablem на tablem1? сразу все заработало. Мое изменение стиля не имеет приоритета над файлом css. Может такое быть?
|
Цитата:
|
Цитата:
#tablem .colored td, #tablem .colored{
background-color:#9999ff;
}
|
Спасибо, все получилось.
|
Цитата:
|
Цитата:
Цитата:
|
Хочу уточнить: Спасибо, господа.
|
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:24. |