Поиск по document с определённого места.
Суть такая - на странице есть 2 таблицы, или одна, или вообще нет, или их больше двух, между ними всегда какой-то код.
Мне нужно с каждой таблицей поработать, с её ячейками. Я ищу первый раз первое совпадение через querySelector, ищу по классу <TD> таблицы - он уникален, если оно есть - получаю все ячейки таблицы через querySelectorAll и работаю с ними. Как мне следующую таблицу найти? Я не могу точно знать, что она есть, но я знаю например ид первой таблицы, ну и её ячейки. Как мне продолжить поиск по document, именно с конца первой таблицы? Я не могу указать родителя для querySelector, т.к. код всегда разный. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
}
table td{
width: 100px; height: 100px;
border: 1px solid #000000
}
.red{
background-color: #FF0000;
}
</style>
</head>
<body>
<table >
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<p>1111</p>
<table >
<tr>
<td class="first">first</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<p>1111</p>
<table>
<tr>
<td>next</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<script>
function findNextTable(table)
{
let next;
return Array.from(document.querySelectorAll('table')).find(el => {
if(next) return next;
next = el == table;
})
}
let table = document.querySelector('td.first').closest('table');
let NextTable = findNextTable(table);
if(NextTable) {
let tds = NextTable.querySelectorAll('td');
tds.forEach(td => td.classList.add('red'))
}
</script>
</body>
</html>
|
Спасибо, но немного не то.
Таблиц очень много на странице, и порядок их меняется. Примерно так выглядит таблица, которая нужна: <table cellpadding=0 cellspacing=0 width="100%"> <tr> <td width=60> <div class="cre_creature" style="width:60px;"> <img src="https://"> </div> </td> <td width=60> <div class="cre_creature" style="width:60px;"> <img src="https://"> </div> </td> </tr> </table> Я извиняюсь, не TD имеет уникальный класс, а DIV который в нём.
function show_army_leader(creature) // Лидерство армии
{
var tr = creature.parentElement.parentElement // Колонка в таблице
var list = tr.querySelectorAll('div[class^="cre_creature"]') // Получить список ячеек армии
if(list.length > 1) // Если нужных ячеек больше 1, бываю и по одной а нужно когда их несколько
{
// Вставка нескольких ячеек в строку
var td = document.createElement('td')
td.innerHTML = " <b>13,983</b>"
var ntd = tr.insertBefore(td, tr.childNodes[list.length]) // Вставить после последнего нужного td в таблице(их на самом деле больше)
td = document.createElement('td')
td.innerHTML = '<img height=24 widht=24 src="https://">'
ntd = tr.insertBefore(td, ntd) // Вставить перед предыдущим td
td = document.createElement('td')
td.setAttribute("width", "10")
td.innerHTML = " "
tr.insertBefore(td, ntd) // Вставить перед предыдущим td
return tr.childNodes[list.length] // Возвращает последний нужный td в таблице(тут не правильно, но это так, для наглядности)
}
return null
}
function main()
{
var creature = document.querySelector('div[class^="cre_creature"]') // Найти первый объект, это ячейка с юнитами
while(1)
{
if(creature == null) break
creature = show_army_leader(creature).querySelector('div[class^="cre_creature"]') // После первого, искать дальше
// Понятно, что querySelector ищет только потомков объекта, но это тоже, пока не доработано
}
}
Я тут подумал, может быть я в корне неправильно выбрал алгоритм? Может проще сначала получить массив всех нужных DIVов. Потом берётся первый, у него ищется родитель, у родителя получаются опять все нужные DIVы, таким образом будет известно количество в первой таблице. Ну и потом просто перебирать первый общий массив, брать следующий DIV производить те же операции, пока массив не кончится. Я просто думал может я не знаю функций, которые позволяют искать с определённого места. |
Цитата:
|
Цитата:
let table = document.querySelector('div.cre_creature').closest('table');
|
Т.е нужно найти таблицы, в которых есть ячейки с div с классом cre_creature?
const goodtables = [...document.querySelectorAll('table')]
.filter(tab => tab.querySelector('td div.cre_creature'))
goodtables - массив нужных таблиц |
Спасибо. ))
|
Цитата:
Попробовал так:
var table = new Array()
var creature = document.querySelectorAll('div[class^="cre_creature"]')
alert(creature.length)
var i = 0, j = 0
while(i < creature.length)
{
let t = creature[i].closest('table')
if(table[j] != t)
{
table[j] = t
j++
}
i++
}
alert(table.length)
Выдаёт столько таблиц, сколько всего ячеек. Видимо ошибка в if(table[j] != t). |
Артист,
можно только гадать, что и как вы хотите сделать. чем не устроил вариант #2 ? |
Цитата:
<style>
td {
width: 30px;
height:10px;
}
td>div.cre_creature {
background-color: red;
}
</style>
<table >
<tr>
<td><div>1</div></td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br>
<table >
<tr>
<td><div class="cre_creature">1</div></td>
<td>2</td>
</tr>
<tr>
<td><div class="cre_creature">3</div></td>
<td>4</td>
</tr>
</table>
<br>
<table >
<tr>
<td>1</td>
<td><div>2</div></td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<br>
<table >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td><div class="cre_creature">3</div></td>
<td>4</td>
</tr>
</table>
<br>
<table >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<script>
const goodtables = [...document.querySelectorAll('table')]
.filter(tab => tab.querySelector('td div.cre_creature'))
alert (goodtables.length) //2
</script>
</body>
Четко напишите, чем нужная таблица отличается от ненужной. Что в ней есть, чего нет в других. Почему вы пишете 'div[class^="cre_creature"]', а не 'div.cre_creature' ? В этом есть какой то особый смысл? |
| Часовой пояс GMT +3, время: 03:31. |