Форум

Артист · #1 (**permalink**) 22.03.2022, 18:19

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

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

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

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

рони · #2 (**permalink**) 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>

Артист · #3 (**permalink**) 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 производить те же операции, пока массив не кончится.

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

Артист · #4 (**permalink**) 22.03.2022, 20:39

Сообщение от Артист

на странице есть 2 таблицы

Вот я лопух. Не всего 2, а 2 нужные таблицы.

рони · #5 (**permalink**) 22.03.2022, 20:53

Сообщение от Артист

не TD имеет уникальный класс, а DIV который в нём.

let table = document.querySelector('div.cre_creature').closest('table');

voraa · #6 (**permalink**) 22.03.2022, 21:02

Т.е нужно найти таблицы, в которых есть ячейки с div с классом cre_creature?

const goodtables = [...document.querySelectorAll('table')]
   .filter(tab => tab.querySelector('td div.cre_creature'))

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

Артист · #7 (**permalink**) 23.03.2022, 16:42

Спасибо. ))

Артист · #8 (**permalink**) 23.03.2022, 21:01

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

Т.е нужно найти таблицы, в которых есть ячейки с 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).

рони · #9 (**permalink**) 23.03.2022, 21:32

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

voraa · #10 (**permalink**) 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' ?
В этом есть какой то особый смысл?

Форум

Справочник

Discord чат

Курсы javascript