Форум

DDim1000 · #1 (**permalink**) 04.11.2019, 12:41

Здравствуйте!
Подскажите, пожалуйста, как сделать чтоб цикл проходил по всем столбцам таблицы?
Вот так только по первому столбцу проходит:

var tch = document.querySelectorAll(".MyTab tbody tr");

                        [].forEach.call(tch, function(tr) {
                        alert(tr.cells[0].textContent); 
                       });

рони · #2 (**permalink**) 04.11.2019, 12:50

DDim1000,
логично же просто добавить перед alert, forEach по tr.cells.

DDim1000 · #3 (**permalink**) 04.11.2019, 13:22

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

DDim1000,
логично же просто добавить перед alert, forEach по tr.cells.

А не получится ли так, что цикл по 10 раз будет проходить по таблице?

var tch = document.querySelectorAll(".MyTab tbody tr");

                        [].forEach.call(tch, function(tr) {
                          [].forEach.cell(tch, function(tr) {
                             alert(tr.cells[0].textContent);// что здесь выведется? 
                           });
                       });

рони · #4 (**permalink**) 04.11.2019, 13:29

DDim1000,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<table width="400" class="MyTab" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
var tch = document.querySelectorAll(".MyTab tbody tr");
    tch.forEach(function(tr) {
    tr.querySelectorAll('td').forEach(function(td) {
    alert(td.textContent)
      });
    });
  </script>
</body>
</html>

рони · #5 (**permalink**) 04.11.2019, 13:34

DDim1000,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<table width="400" class="MyTab" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
var tch = document.querySelectorAll(".MyTab tbody tr");
    tch[0].querySelectorAll('td').forEach(function(_, i) {
    tch.forEach(function(tr) {
    alert(tr.cells[i].textContent)
      });
    });
  </script>
</body>
</html>

DDim1000 · #6 (**permalink**) 04.11.2019, 15:49

А если таблиц несколько? Как можно обойти каждую таблицу по очереди? Ячеек в строке: 15

<div class="dat" align="left" style="border: 1px solid #000"> 

        <table width="400" class="MyTab">

            <thead>

                                              ……

                                          </thead>

            <tbody>
            
                                          <tr>

                        <td>Таблица 1. Ячейка 1</td>

                        <td>Таблица 1. Ячейка 2</td><td>Таблица 1. Ячейка 3</td>

                        <td>Таблица 1. Ячейка 4</td>

                              </tr>

                                  <tr>

                        <td>Таблица 1. Ячейка 5</td>

                        <td>Таблица 1. Ячейка 6</td>

                        <td>Таблица 1. Ячейка 7</td>

                        <td >Таблица 1. Ячейка 8</td>

                    </tr>

                </tbody>

        </table>

    </div>
<div class="dat" align="right" style="border: 1px solid #000"> 

        <table width="400" class="MyTab">

            <thead>

                                              ……

                                          </thead>

            <tbody>
            
                                          <tr>

                        <td>Таблица 2. Ячейка 11</td>

                        <td>Таблица 2. Ячейка 2 </td><td>Таблица 2. Ячейка 3</td>

                        <td>Таблица 2. Ячейка 4</td>

                              </tr>

                                  <tr>

                        <td>Таблица 2. Ячейка 5</td>

                        <td>Таблица 2. Ячейка 6</td>

                        <td>Таблица 2. Ячейка 7</td>

                        <td >Таблица 2. Ячейка 8</td>

                    </tr>

                </tbody>

        </table>

    </div>

рони · #7 (**permalink**) 04.11.2019, 15:58

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

Как можно обойти каждую таблицу по очереди?

алгоритм тотже первый цикл по таблицам!!!

рони · #8 (**permalink**) 04.11.2019, 16:04

DDim1000,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<div class="dat" align="left" style="border: 1px solid #000">

        <table width="400" class="MyTab">

            <thead>

                                              ……

                                          </thead>

            <tbody>

                                          <tr>

                        <td>Таблица 1. Ячейка 1</td>

                        <td>Таблица 1. Ячейка 2</td><td>Таблица 1. Ячейка 3</td>

                        <td>Таблица 1. Ячейка 4</td>

                              </tr>

                                  <tr>

                        <td>Таблица 1. Ячейка 5</td>

                        <td>Таблица 1. Ячейка 6</td>

                        <td>Таблица 1. Ячейка 7</td>

                        <td >Таблица 1. Ячейка 8</td>

                    </tr>

                </tbody>

        </table>

    </div>
<div class="dat" align="right" style="border: 1px solid #000">

        <table width="400" class="MyTab">

            <thead>

                                              ……

                                          </thead>

            <tbody>

                                          <tr>

                        <td>Таблица 2. Ячейка 11</td>

                        <td>Таблица 2. Ячейка 2 </td><td>Таблица 2. Ячейка 3</td>

                        <td>Таблица 2. Ячейка 4</td>

                              </tr>

                                  <tr>

                        <td>Таблица 2. Ячейка 5</td>

                        <td>Таблица 2. Ячейка 6</td>

                        <td>Таблица 2. Ячейка 7</td>

                        <td >Таблица 2. Ячейка 8</td>

                    </tr>

                </tbody>

        </table>

    </div>

<script>
var tablesTbody = document.querySelectorAll('.MyTab tbody');
    tablesTbody.forEach(function(tbody) {
    var trs = tbody.querySelectorAll('tr');
    trs[0].querySelectorAll('td').forEach(function(_, i) {
    trs.forEach(function(tr) {
    alert(tr.cells[i].textContent)
         });
      });
    });
  </script>
</body>
</html>

DDim1000 · #9 (**permalink**) 04.11.2019, 16:13

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

алгоритм тотже первый цикл по таблицам!!!

Сейчас выводятся сначала все первые столбцы, из всех таблиц, потом вторые, третьи и т.д., и цикл заканчивается не успевая пройти все столбцы таблицы.

var tch = document.querySelectorAll(".MyTab tbody tr");

   tch[0].querySelectorAll('td').forEach(function(_, i) {

    tch.forEach(function(tr) {

    alert(tr.cells[i].textContent)

      });
    });

DDim1000 · #10 (**permalink**) 04.11.2019, 16:37

Все, разобрался. Спасибо!!!!!!!!

Форум

Справочник

Discord чат

Курсы javascript