Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Поиск по document с определённого места. (https://javascript.ru/forum/misc/83814-poisk-po-document-s-opredeljonnogo-mesta.html)

Артист 22.03.2022 18:19
Поиск по document с определённого места.
 
Суть такая - на странице есть 2 таблицы, или одна, или вообще нет, или их больше двух, между ними всегда какой-то код.
Мне нужно с каждой таблицей поработать, с её ячейками.

Я ищу первый раз первое совпадение через querySelector, ищу по классу <TD> таблицы - он уникален, если оно есть - получаю все ячейки таблицы через querySelectorAll и работаю с ними.

Как мне следующую таблицу найти?
Я не могу точно знать, что она есть, но я знаю например ид первой таблицы, ну и её ячейки.

Как мне продолжить поиск по document, именно с конца первой таблицы?
Я не могу указать родителя для querySelector, т.к. код всегда разный.

рони 22.03.2022 19:27
Цитата:
Сообщение от Артист
ищу по классу <TD> таблицы - он уникален,
 
<!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>

Артист 22.03.2022 20:31
Спасибо, но немного не то.
Таблиц очень много на странице, и порядок их меняется.
Примерно так выглядит таблица, которая нужна:
<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 = "&nbsp;<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 = "&nbsp;"
		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 производить те же операции, пока массив не кончится.

Я просто думал может я не знаю функций, которые позволяют искать с определённого места.

Артист 22.03.2022 20:39
Цитата:
Сообщение от Артист (Сообщение 544283)
на странице есть 2 таблицы
Вот я лопух. Не всего 2, а 2 нужные таблицы. :)

рони 22.03.2022 20:53
Цитата:
Сообщение от Артист
не TD имеет уникальный класс, а DIV который в нём.
 
let table = document.querySelector('div.cre_creature').closest('table');

voraa 22.03.2022 21:02
Т.е нужно найти таблицы, в которых есть ячейки с div с классом cre_creature?
const goodtables = [...document.querySelectorAll('table')]
   .filter(tab => tab.querySelector('td div.cre_creature'))


goodtables - массив нужных таблиц

Артист 23.03.2022 16:42
Спасибо. ))

Артист 23.03.2022 21:01
Цитата:
Сообщение от voraa (Сообщение 544297)
Т.е нужно найти таблицы, в которых есть ячейки с div с классом cre_creature?
const goodtables = [...document.querySelectorAll('table')]
   .filter(tab => tab.querySelector('td div.cre_creature'))


goodtables - массив нужных таблиц
К сожалению код выдаёт 7 таблиц, когда их 2.

Попробовал так:
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).

рони 23.03.2022 21:32
Артист,
можно только гадать, что и как вы хотите сделать. чем не устроил вариант #2 ?

voraa 23.03.2022 21:59
Цитата:
Сообщение от Артист
К сожалению код выдаёт 7 таблиц, когда их 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' ?
В этом есть какой то особый смысл?

voraa 23.03.2022 22:20
Цитата:
Сообщение от Артист
Выдаёт столько таблиц, сколько всего ячеек.
Видимо ошибка в if(table[j] != t).
Ошибка в 
if(table[j] != t)
    {
        table[j] = t
        j++
    }

Первый раз j=0 table[j] - undefined. Условие выполнится, j =1
Второй раз j=1 table[j] - undefined. Условие выполнится, j =2
....
Условие выполняется всегда.

Артист 24.03.2022 06:31
Цитата:
Сообщение от рони (Сообщение 544309)
Артист,
можно только гадать, что и как вы хотите сделать. чем не устроил вариант #2 ?
Так там получается что находит только первую таблицу.
Если вы про это:
Цитата:
Сообщение от рони (Сообщение 544295) 
let table = document.querySelector('div.cre_creature').closest('table');
Хочу для онлайн игры гвд, сделать отображение лидерства армий, т.к. в ивентах не понятно чья армия сильнее.
Я давно написал расширение для хрома и пихаю в него все свои доработки именно к этой игре.
Цитата:
Сообщение от voraa (Сообщение 544311)
Значит вы не все условия своих таблиц написали.
Четко напишите, чем нужная таблица отличается от ненужной. Что в ней есть, чего нет в других.
Да вроде все описал, в 3 посте пример. Отличается только классом дивов. С таким классом нет больше ничего на странице, объектов вернее нет.
Открываю код страницы в новой вкладке, в поиск ввожу cre_creature, 21 совпадение.
Из них 14 - это из таблиц, т.е. 2 таблицы у которых по 7 ячеек.
Остальные 7 - это в самом верху страницы параметры классам задаются.

Цитата:
Сообщение от voraa (Сообщение 544311)

Почему вы пишете 'div[class^="cre_creature"]', а не 'div.cre_creature' ?
В этом есть какой то особый смысл?
Да, смысл есть, у таблиц ещё бывает класс "cre_creature72", это я уже немного вперёд просто забегаю.

Цитата:
Сообщение от voraa (Сообщение 544312)
Ошибка в...
Спасибо. ))

Вечером ещё раз перепроверю.

voraa 24.03.2022 07:09
Ну так вариант в посте #10 как раз и находит только 2 таблицы, где есть такие ячейки.

Если нужно искать еще с классом cre_creature72, то изменить условие в фильтре на

tab.querySelector('td div:is(.cre_creature, .cre_creature72)')

рони 24.03.2022 07:22
Цитата:
Сообщение от Артист
Так там получается что находит только первую таблицу.
Если вы про это:
там не только эта строка!!! там ещё функция поиска ближайшей следующей таблицы, от этой.

<!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 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>

<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('div.cre_creature').closest('table');//определили первую таблицу

  let NextTable = findNextTable(table); // нашли следующую за ней
  if(NextTable) {
      let tds = NextTable.querySelectorAll('td');
      tds.forEach(td => td.classList.add('red')) //покрасили все клетки в следующей таблице в красный цвет, для примера
  }
</script>
</body>
</html>

Артист 24.03.2022 17:37
Ну не ругайтесь, я туплю частенько. ))
Спасибо, буду пробовать, когда выйду из запоя. )


Часовой пояс GMT +3, время: 22:17.