Почему правило css не применяется к элементу DOM?
Я программно получаю доступ к элементу DOM у меня это ячейка таблицы. Применяю к ней правило css а именно выравнивание текста а оно не отображается. Вот мой код
var table =$('#goods').DataTable(); var dat1=table.cell(0,1); var nd=dat1.node(); $( nd).css('align-text','center'); Что я делаю не так? Как достичь желаемого? |
Цитата:
Цитата:
|
Я пробовал и просто align все равно не менялось выравнивание как сделать правильно ?чтобы выравнивание изменилось?
|
izumov,
$(nd).css('text-align','center')
|
свойство вижу в отладчике меняется а выравнивание не изменяется.Почему?
|
izumov,
вероятно вы изменили свойства другой ячейки, а не той что нужно. без макета можно только гадать. |
уточняю. меняется и тут же спустя секунду возвращается к прежнему состоянию.Не понимаю. Как работает этот механизм.что вынуждает возвращаться к прежнему состоянию?Чтобы не быть голословным вот моя страница http://montaj.vianor-konakovo.ru/goods_new1.html
После загрузки данных в таблицу с сервера .при нажатии на кнопку перенести в корзину заказов в 1-й строке 2-м столбце текст прижимается вправо. И тут же возвращается на прежнее место.А мне надо чтобы выравнивание не возвращалось к предыдущему состоянию. В чем может быть проблема?Как достичь желаемого? |
Цитата:
|
подскажите а как мне обратиться программно к заголовку и footer колонки ?в коде я выбрал ячейку тела таблицы а как к заголовку и футеру обратиться чтобы потом можно было установить стиль
|
izumov,
$("#goods").find("thead th:eq(2)").css({color : "red"});
$("#goods").find("tfoot th:eq(2)").css({color : "red"})
лучше в css прописать всё что вам нужно, а не скриптом устанавливать стили. |
знаю что лучше css но не получается. НЕ срабатывают правила в макете а почему не понимаю.А сроки сдачи проекта поджимают. Надо как то выходить из ситуации
|
вот не хотят у меня заголовки в thead и tfoot выравниваться посредине. Конкретно заголовок цена прижат вправо а мне надо по центру.Данные в колонке размер мне надо центрировать.Для их центрирования в goods.css
я ввел правило .Size { text-align:center; !important ; align: center; !important ; } Но оно по какой то причине не срабатывает. Подскажите какие коррективы в goods.css мне ввести чтобы я получил желаемые выравнивания текста. |
izumov,
селектор короткий, нужно типа
table.dataTable thead > tr > th {text-align:center;}
|
не сработал подскажите как с помощью jQuery выбрать в таблице ячейку
td по индексам? |
Цитата:
|
Цитата:
|
у вас они отображаются по центру?
|
Цитата:
|
по аналогии поста 10 я пробовал вариант
$("#goods").find("body tr:eq(1) td: eq(8)"); интерпретатору он не пришелся по душе я не получил доступ к элементу DOm ячейки по индексу где то я ошибся. |
izumov,
может tbody |
по аналогии с постом 10 я пробовал получить доступ к элементу DOM ячейки с заданными индексами с помощью выражения
var cell2= $("#goods").find("body tr:eq(1) td: eq(8)"); интерпретатору оно не понравилось видать я где то ошибся.Но где? |
У меня же надпись Цена прижата к правой границе
|
izumov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("#goods").find("tbody tr:eq(1) td:eq(8)").css({backgroundColor: "hsla(300, 100%, 50%, 1)"});
});
</script>
</head>
<body>
<table id="goods">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
|
У меня заголовок Цена прижат к правой границе рисунок прилагается.
|
Цитата:
|
jquery-3.3.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: tbody tr:eq(1) td: eq(8)
|
Цитата:
|
izumov,
я пас, вам нужен специалист по вёрстке css/html, где и что вы изменяите мне сложно понять. |
izumov,
сделайте так может чем-то вам поможет ...
$(function() {
$("#goods_wrapper > div.dataTables_scroll > div.dataTables_scrollHead > div > table > thead > tr > th.Price.sorting").css({width: ""});
});
|
благодарю помогло выровнять по центру. И это приблизило проект к финишу.В чем смысл приведенного выражения?
|
Цитата:
Цитата:
|
Вложений: 1
Мой макет http://montaj.vianor-konakovo.ru/goods_new11.html
Но не все Заголовки ЛГ,"P,LT" так и остались прижаты к правому краю картинку что я вижу прикрепляю к сообщению на конопку перенести в корзину заказов навесил код var cel=$("#goods").find("thead th:eq(5)") cel.align='left'; $(cel).css('padding','0'); $(cel).css('text-align','left');надеялся что заголовок ЛГ сдвинется влево- не шелохнулся. Для меня загадка почему элемент заголовка не воспринимает команду по применению правила css. Как заставить заголовок отреагировать? |
izumov,
у вас ячейки сдвинуты, а не текст внутри ячеек, почему это так я не знаю, вам нужен другой специалист, мне совсем непонятно зачем что-то менять, видимо вы создаёте сами проблему, либо берёте таблицу с чужой разметкой. |
а можно ли программно сдвинуть эту ячейку в нужное место?
|
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Кстати вы можете скачать сразу всю базу данных и уже с ней работать. Тогда переключение между страницами будет быстрей! Фильтровать вы можете на клиенте! А ячейки у вас не сдвинуты, это две разные таблицы! |
Вот ради интереса посмотрел, как работать с этим кодом от jQuery DataTable...
Таблица правильно отображается, также сделал фильтр (строки №№187–198), но он не совсем правильно работает (нужно убрать из списка модели после выбора бренда в списке, и наоборот), но я думаю, что такой фильтр не нужен, поскольку поиск работает по умолчанию! Я скачал все данные из вашей базы и поместил в data.json для этого примера. Вам нужно переделать скрипт на сервере, чтобы он возвращал все данные и запрашивать эти данные только один раз. Вот пример...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<style>
body {
overflow-y: scroll;
font: 1em system-ui, Arial, sans-serif;
}
table#goodies {
white-space: nowrap;
letter-spacing: -0.025em;
font-size: 10px;
table-layout: fixed;
display: block;
overflow: auto;
}
#goodies-filter {
margin: 1em 0;
}
select, input {
border: 1px solid #CCC;
border-radius: 4px;
background-color: #FFF;
background-image: none;
color: #000;
font: inherit;
padding: 4px;
margin: 0;
box-sizing: border-box;
}
.counter-button {
all: unset;
font-weight: bold;
font-size: 200%;
color: red;
padding: 0 0.1em;
}
</style>
</head>
<body>
<div id="goodies-filter">
<label>
Бренд:
<select id="goodies-brand-filter">
<option value="">все</option>
</select>
</label>
<label>
Модель:
<select id="goodies-model-filter">
<option value="">все</option>
</select>
</label>
</div>
<table id="goodies" class="display" style="width:100%">
<thead>
<tr>
<th>Код</th>
<th>Бренд</th>
<th>Модель</th>
<th>P, LT</th>
<th>Размер</th>
<th>ЛГ</th>
<th>Индекс</th>
<th>Иное</th>
<th>Цена</th>
<th>Остаток</th>
<th>Заказ</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Код</th>
<th>Бренд</th>
<th>Модель</th>
<th>P, LT</th>
<th>Размер</th>
<th>ЛГ</th>
<th>Индекс</th>
<th>Иное</th>
<th>Цена</th>
<th>Остаток</th>
<th>Заказ</th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
<script>
var table = $("#goodies").DataTable({
processing: true,
autoWidth: true,
pageLength: 10,
ajax: "https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66/data.json",
columnDefs: [
{ width: "70px", targets: [0] }, //код
{ width: "50px", targets: [1] }, //бренд
{ width: "200px", targets: [2] }, //модель
{ width: "51px", targets: [3] }, //P,L
{ width: "150px", targets: [4] },// размер
{ width: "44px", targets: [5] },// ЛГ
{ width: "50px", targets: [6] }, //индекс
{ width: "136px", targets: [7] }, //иное
{
width: "70px", targets: [8],
render: $.fn.dataTable.render.number(' ', '.', 2, ' ', '')
}, //цена
{ width: "50px", targets: [9] }, //остаток
{
width: "50px", targets: [10], className: "goodies-order",
render: function (data, type, row) {
return [
'<button class="counter-button" data-inc="-1">−</button>',
'<input type="number" style="width: 5em;" min="0" max="' + row[9] + '">',
'<button class="counter-button" data-inc="+1">+</button>'
].join("")
}
} //заказ
],
language: {
processing: "Подождите...",
search: "Поиск:",
lengthMenu: "Показать _MENU_ записей",
info: "Записи с _START_ до _END_ из _TOTAL_ записей",
infoEmpty: "Записи с 0 до 0 из 0 записей",
infoFiltered: "(отфильтровано из _MAX_ записей)",
infoPostFix: "",
loadingRecords: "Загрузка записей...",
zeroRecords: "Записи отсутствуют.",
emptyTable: "В таблице отсутствуют данные",
paginate: {
first: "Первая",
previous: "Предыдущая",
next: "Следующая",
last: "Последняя"
},
aria: {
sortAscending: ": активировать для сортировки столбца по возрастанию",
sortDescending: ": активировать для сортировки столбца по убыванию"
},
select: {
rows: {
_: "Выбрано записей: %d",
"0": "Кликните по записи для выбора",
"1": "Выбрана одна запись"
}
}
}
});
table.on("init", function() {
$("#goodies-brand-filter").append(getUniqueItems(1));
$("#goodies-model-filter").append(getUniqueItems(2));
function getUniqueItems(column) {
return $.map(
Array.from(new Set(Array.from(table.column(column).data()))).sort(),
function (item) { return $("<option />").text(item); }
)
}
});
$("#goodies").on("click", ".counter-button", function(event) {
var button = $(event.target);
var inc = Number(button.attr("data-inc"));
var input = button.closest("td").find("input");
var min = Number(input.attr("min"));
var max = Number(input.attr("max"));
var value = Number(input.val());
input.val(Math.max(min, Math.min(value + inc, max)) || "");
});
$("#goodies-filter [id^='goodies-'][id$='-filter']").on("change", function() {
var brand = $("#goodies-brand-filter").val();
var model = $("#goodies-model-filter").val();
$("#goodies_filter input").val([brand, model].join(" ").trim()).trigger("input");
});
$("#goodies_filter input").on("input", function(event) {
if(event.originalEvent.isTrusted) {
$("#goodies-brand-filter").val("");
$("#goodies-model-filter").val("");
}
});
</script>
</body>
</html>
|
в тексте html заголовки таблицы объявлены без размеров.Сам удивляюсь откуда они взялись там.
|
подскажите пожалуйста откуда взялись 2 таблицы?в инструменте отладчика я не вижу 2 таблицы
|
Цитата:
Кстати, я посмотрел, как вы написали обработку кнопок +/-, так вот используйте делегацию и data-* атрибут... тогда можно написать код без повторения (всего-то 10 строк, смотрите улучшенный код в посте №37) |
| Часовой пояс GMT +3, время: 02:47. |