Форум

Sayler91 · #1 (**permalink**) 25.07.2017, 18:49

Доброе время суток. Подскажите как посчитать количество символов (включая пробелы) в Ячейках 2 и 4. И если эта сумма будет превышать больше 10 символов, эти ячейки буду закрашены красным цветом.

<table class="form-table from-table_size_sm">
<tbody>
<tr><th style="width: 150px;">Ячейка 1</th><td><div class="model-value">123456</div></td>
<td class="form-table__gutter">&nbsp;</td><th>Ячейка 2</th><td><div class="model-value">78 9456 123</div></td>
<td class="form-table__gutter">&nbsp;</td></tr><tr><th style="width: 150px;">Ячейка 3</th><td><div class="model-value">а б вг-д</div></td>
<td class="form-table__gutter">&nbsp;</td><th>Ячейка 4</th><td><div class="model-value">11-11-11</div></td></tr>
</tbody>
</table>

laimas · #2 (**permalink**) 25.07.2017, 19:19

Куда пропала ячейка во второй строке?

$('.form-table tr').children(':nth-child(4)').css('background-color', function() {
    return this.textContent.length > 10 ? '#f00' : '#fff'
})

Sayler91 · #3 (**permalink**) 25.07.2017, 19:47

Сообщение от laimas

Куда пропала ячейка во второй строке?

$('.form-table tr').children(':nth-child(4)').css('background-color', function() {
    return this.textContent.length > 10 ? '#f00' : '#fff'
})

Вроде все на месте. У меня есть массив данных, как мне найти именно в группах <th>Ячейка 2</th> и <th>Ячейка 4</th>? Для этого примера хорошо подходит, но мне нужно более универсальное.

laimas · #4 (**permalink**) 25.07.2017, 19:53

Сообщение от Sayler91

Вроде все на месте.

Точно? В первой строке 6 ячеек, во второй 5. Код написан так небрежно, что черт ногу сломает, что-то не доглядеть просто.

Сообщение от Sayler91

но мне нужно более универсальное

А что значит универсальное? Код не сможет догадаться чего от него хотят, пока ему конкретно не описать задачу.

Sayler91 · #5 (**permalink**) 25.07.2017, 20:12

Извините, но я не до конца понимаю. Я сохранил этот код в html формате и получил 8 ячеек. Мне же нужно посчитать "78 9456 123" и "11-11-11", а они находятся в группе "Ячейка 2" и "Ячейка 4" соответственно.Как искать по коду именно <th>Ячейка 2</th> и <th>Ячейка 4</th>? Простите мою неосведомленность

laimas · #6 (**permalink**) 25.07.2017, 21:00

Сообщение от Sayler91

Мне же нужно посчитать "78 9456 123" и "11-11-11", а они находятся в группе "Ячейка 2" и "Ячейка 4" соответственно.

А что есть группа? Есть для таблиц colgroup, это можно определить, а по каким критериям можно понять, что некая запись в какой-то ячейке (или сама ячейка) определяет группу из N ячеек? Да еще и о универсальности речь шла.

Sayler91 · #7 (**permalink**) 25.07.2017, 21:37

<body>
    <table class="form-table from-table_size_sm">
<tbody>
<tr>
	<th>Имя</th><td><div class="model-value">Иван</div></td>
	<td class="form-table__gutter">&nbsp;</td><th>Имя (лат.)</th><td><div class="model-value">IVAN</div></td>
</tr>
<tr>
	<th>Фамилия</th><td><div class="model-value">Иванович</div></td>
	<td class="form-table__gutter">&nbsp;</td><th>Фамилия на лат.</th><td><div class="model-value">Ivanovich</div></td>
</tr>
</tbody>
</table>

Вот еще пример html. Можно ли создать такое условие? Если в <tr> есть <th> с текстом "Имя", то берется значение <td>.

laimas · #8 (**permalink**) 25.07.2017, 22:26

$('th:contains("Имя")').next()

В данном случае это будет коллекция из двух ячеек <td><div class="model-value">Иван</div></td> и <td><div class="model-value">IVAN</div></td>.

Sayler91 · #9 (**permalink**) 26.07.2017, 05:33

Спасибо. Теперь я понял. Зная расположение ячеек, можно ли посчитать количество символов ячеек "Ivan" и "Ivanovich" и поставить условие если их количество будет превышать 10 они изменят цвет на красный?

laimas · #10 (**permalink**) 26.07.2017, 05:35

Ну так сделать тоже самое, что и в первом случае, различие то только в селекторах.

$('th:contains("Имя")').next().css('background-color', function() {
    return this.textContent.length > 10 ? '#f00' : '#fff'
})

PS. textContent поддерживается не всеми браузерами, но это можно заменить на либо innerHTML, либо this.textContent заменить на $(this).text()

PPS. Нет, в данном случае innerHTML применить нельзя, так как он возвращает html содержимое, а ячейки имеют вложенный DIV.

Форум

Справочник

Discord чат

Курсы javascript