Как обращаться к ячейке таблицы?

Question

[Анатолий]

Имеется таблица с объединенными ячейками.
Как сделать, чтобы текст в левом столбце был синим, а в правом красным?
Пример:
https://codepen.io/workcode/pen/NWKaYxB

В примере видно, что стиль сбивается, и красятся также внутренние ячейки.

Это просто пример, нужно универсальное решение, на N x N ячеек, объединены могут быть любые ячейки.

Answer 1

[0xD34F]

Первые ячейки - у которых левая граница минимальна. Последние - у которых правая (левая граница + ширина) максимальна. Можно их найти и добавить какой-нибудь класс:

const td = [...document.querySelectorAll('table td')];
const first = td[0].offsetLeft;
const last = Math.max(...td.map(n => n.offsetLeft + n.offsetWidth));

td.forEach(n => (
  (n.offsetLeft === first) && n.classList.add('first'),
  (n.offsetLeft + n.offsetWidth === last) && n.classList.add('last')
));

Comments

[Анатолий]

Только сейчас увидел, что Вы добавили классы, этот пример мне нужен был, чтобы понять логику, но сейчас я немного запутался.
Мне нужно было скругление бордера снизу, а также убрать лишний бордер справа (у некоторых ячеек)
https://codepen.io/workcode/pen/BaBwxMo

[0xD34F]

Анатолий, https://jsfiddle.net/3ynbzjf2/

[Анатолий]

Спасибо.

[Анатолий]

А что делать, если таблиц много, сейчас меняется только у последней таблицы.

[0xD34F]

Анатолий, подумайте.

[Анатолий]

У меня еще горизонтальная прокрутка есть, поэтому я перебираю таблицы в цикле:

var elems = document.querySelectorAll('.scrollMouse');
for (var a = 0; a < elems.length; a++) {
    тут мой код
}

можно ли как-то Ваше решение сюда вставить, с минимальными изменениями. Чтобы второй цикл не городить.

[0xD34F]

Анатолий, как-то можно.

[Анатолий]

Я смог только так придумать, но оно не работает как надо. Т.е. у 2 из 7 таблиц не отображается. У этих двух таблиц даже объединенных ячеек нет.

var elems = document.querySelectorAll('.scrollMouse');
  for (var a = 0; a < elems.length; a++) {

    var td = [...elems[a].querySelectorAll('table td')];
    var first = td[0].offsetLeft;
    var last = Math.max(...td.map(n => n.offsetLeft + n.offsetWidth));

    var firstTd = td.filter(n => n.offsetLeft === first);
    var lastTd = td.filter(n => n.offsetLeft + n.offsetWidth === last);

    firstTd[firstTd.length - 1].classList.add('round-left-bottom');
    lastTd[lastTd.length - 1].classList.add('round-right-bottom');

    lastTd.forEach(n => n.classList.add('border-right'));
  }

Upd. Поясню, что класс .scrollMouse это div, а внутри уже таблица.

[0xD34F]

Анатолий, выпытывать из вас подробности лично у меня никакого желания нет. Думаю, вам стоит оформить новый вопрос. Уверен, найдётся кто-то, кто не пройдёт мимо.

[Анатолий]

Ладно, спасибо, буду разбираться. Я просто не так хорошо знаю JS.

[Анатолий]

Можно хотя бы узнать, чем отличается:

var td = [...document.querySelectorAll('table td')];

от

var td = [...document.querySelectorAll('.scrollMouse')[0].querySelectorAll('table td')];

если
<div class="scrollMouse"><table></table></div>
просто когда я так пишу, то у меня в консоли ошибка:
Uncaught TypeError: Cannot read property 'offsetLeft' of undefined

жалуется на строку: var first = td[0].offsetLeft;

[0xD34F]

Анатолий, какая часть словосочетания "оформить новый вопрос" вам непонятна?

[Анатолий]

Как применить стиль к нескольким таблицам?

Answer 2

[Кузьма Шпагин]

Классами как вариант.

Comments

[Анатолий]

Классы указывать нельзя, таблицы генерируются автоматически, решение нужно только через js.

[Анатолий]

Полдня уже думаю над логикой, но что-то тяжко. Первое что пришло в голову это считать, если указан атрибут rowspan, но пока что-то не придумал.
Браузеры же как-то понимают это логику.

[hzzzzl]

Анатолий, не думаю что выйдет, недостаточно опознавательных признаков, чтобы выбрать только 1й и 4й из этих 4 элементов