Перебор столбцов таблицы
Здравствуйте!
Подскажите, пожалуйста, как сделать чтоб цикл проходил по всем столбцам таблицы? Вот так только по первому столбцу проходит:
var tch = document.querySelectorAll(".MyTab tbody tr");
[].forEach.call(tch, function(tr) {
alert(tr.cells[0].textContent);
});
|
DDim1000,
логично же просто добавить перед alert, forEach по tr.cells. :-? |
Цитата:
var tch = document.querySelectorAll(".MyTab tbody tr");
[].forEach.call(tch, function(tr) {
[].forEach.cell(tch, function(tr) {
alert(tr.cells[0].textContent);// что здесь выведется?
});
});
|
обход ячеек таблицы слева на право
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>
|
обход ячеек таблицы сверху на вниз
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>
|
А если таблиц несколько? Как можно обойти каждую таблицу по очереди? Ячеек в строке: 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>
|
Цитата:
|
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>
|
Цитата:
var tch = document.querySelectorAll(".MyTab tbody tr");
tch[0].querySelectorAll('td').forEach(function(_, i) {
tch.forEach(function(tr) {
alert(tr.cells[i].textContent)
});
});
|
Все, разобрался. Спасибо!!!!!!!!
|
| Часовой пояс GMT +3, время: 19:54. |