Подсчет символов в <th></th>
Доброе время суток. Подскажите как посчитать количество символов (включая пробелы) в Ячейках 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"> </td><th>Ячейка 2</th><td><div class="model-value">78 9456 123</div></td> <td class="form-table__gutter"> </td></tr><tr><th style="width: 150px;">Ячейка 3</th><td><div class="model-value">а б вг-д</div></td> <td class="form-table__gutter"> </td><th>Ячейка 4</th><td><div class="model-value">11-11-11</div></td></tr> </tbody> </table> |
Куда пропала ячейка во второй строке?
$('.form-table tr').children(':nth-child(4)').css('background-color', function() {
return this.textContent.length > 10 ? '#f00' : '#fff'
})
|
Цитата:
|
Цитата:
Цитата:
|
Извините, но я не до конца понимаю. Я сохранил этот код в html формате и получил 8 ячеек. Мне же нужно посчитать "78 9456 123" и "11-11-11", а они находятся в группе "Ячейка 2" и "Ячейка 4" соответственно.Как искать по коду именно <th>Ячейка 2</th> и <th>Ячейка 4</th>? Простите мою неосведомленность :-?
|
Цитата:
|
<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"> </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"> </td><th>Фамилия на лат.</th><td><div class="model-value">Ivanovich</div></td>
</tr>
</tbody>
</table>
Вот еще пример html. Можно ли создать такое условие? Если в <tr> есть <th> с текстом "Имя", то берется значение <td>. |
$('th:contains("Имя")').next()
В данном случае это будет коллекция из двух ячеек <td><div class="model-value">Иван</div></td> и <td><div class="model-value">IVAN</div></td>. |
Спасибо. Теперь я понял. Зная расположение ячеек, можно ли посчитать количество символов ячеек "Ivan" и "Ivanovich" и поставить условие если их количество будет превышать 10 они изменят цвет на красный?
|
Ну так сделать тоже самое, что и в первом случае, различие то только в селекторах.
$('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. |
Спасибо за ответы. Я наверное буду использовать innerText, так как с ним у меня проблем не было на других браузерах. Но все равно я не смог приделать ваш код. Подскажите тему что вы используете, а именно манипуляции с ячейкой и перевод ее в текстовую переменную?
|
Цитата:
Цитата:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('th:contains("Имя")').next().css('background-color', function() {
return this.textContent.length > 4 ? '#f00' : '#fff'
});
});
</script>
</head>
<body>
<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"> </td><th>Имя (лат.)</th><td><div class="model-value">IVAN-ivan</div></td>
</tr>
<tr>
<th>Фамилия</th><td><div class="model-value">Иванович</div></td>
<td class="form-table__gutter"> </td><th>Фамилия на лат.</th><td><div class="model-value">Ivanovich</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Количество в условии и изменение на IVAN-ivan для примера. Не знаю какие проблемы, почему и что "не приделывается". Цитата:
|
Вроде все понял как работает, буду разбираться. Маленький вопросик: Я буду использовать скрипт, где нет внешнего интернета, по этому файл jquery.min.js не сможет использоваться. Можно ли его использовать в папке сохраненной в диске C?
|
Цитата:
добавляйте так <script src="путь к папке где он лежит/jquery-3.2.1.min.js"></script> |
Цитата:
|
Не хотелось бы использовать сторонний файл. А так спасибо за совет.
|
Цитата:
|
Цитата:
создайте тег <script></script> и скопируйте внутрь тега все содержимое файла jquery.min.js и будет у вас все в одном файле. |
| Часовой пояс GMT +3, время: 08:56. |