Получить данные с динамически созданной таблицы

@Davlat · Регистрация: 22.11.2015

Студворк — интернет-сервис помощи студентам

Здравстуйте, такая ситуация. Нашел такой пример:
index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
   table tr:not(:first-child){
       cursor: pointer; transition: all  .25s ease-in-out;
   }
   table tr:not(:first-child):hover{background-color: #ddd;}
</style>
<title>Выбор строки в таблице</title>
</head>
<body>
First Name:<input type="text" name="fname" id="fname"/><br /><br />
Last Name:<input type="text" name="lname" id="lname"/><br /><br />
Age:<input type="text" name="age" id="age"/><br /><br />
 
<a href="second.php">Страница с динамической таблицей</a><br /><br />
 
 
<table id="table" border="1">
  <tr>
     <th>First name</th>
     <th>Last name</th>
     <th>Age name</th>
  </tr>
  
  <tr>
     <td>FN1</td>
     <td>LN1</td>
     <td>10</td>
  </tr>
  
  <tr>
     <td>FN2</td>
     <td>LN2</td>
     <td>20</td>
  </tr>
  
  <tr>
     <td>FN3</td>
     <td>LN3</td>
     <td>30</td>
  </tr>
  
  <tr>
     <td>FN4</td>
     <td>LN4</td>
     <td>40</td>
  </tr>
  
  <tr>
     <td>FN5</td>
     <td>LN5</td>
     <td>50</td>
  </tr>
</table>
 
<script>
    var table = document.getElementById('table');
    for(var i = 1; i < table.rows.length; i++) 
    {
      table.rows[i].onclick = function()
      {
        document.getElementById("fname").value = this.cells[0].innerHTML;
        document.getElementById("lname").value = this.cells[1].innerHTML;
        document.getElementById("age").value = this.cells[2].innerHTML;
      };  
    }
    
</script>
</body>
</html>

Выделяем мышкой строку, данные выводятся в input. Все прекрасно. Мне надо так же вытащить данные из таблицы созданной динамически. Сделал вот так:

second.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
   table tr:not(:first-child){
       cursor: pointer; transition: all  .25s ease-in-out;
   }
   table tr:not(:first-child):hover{background-color: #ddd;}
</style>
<title>Выбор строки в  ДИНАМИЧЕСКОЙ таблице</title>
</head>
<body>
First Name:<input type="text" name="fname" id="fname"/><br /><br />
Last Name:<input type="text" name="lname" id="lname"/><br /><br />
Age:<input type="text" name="age" id="age"/><br /><br />
<div id="d_table">
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="load.js"></script>
</body>
</html>

Отдельно в файле лежит скрипт действия при клике

load.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function () {
   $('#d_table').load('kod.php');  
    
  var table = document.getElementById('table');
    for(var i = 1; i < table.rows.length; i++) 
    {
      table.rows[i].onclick = function()
      {
        document.getElementById("fname").value = this.cells[0].innerHTML;
        document.getElementById("lname").value = this.cells[1].innerHTML;
        document.getElementById("age").value = this.cells[2].innerHTML;
      };  
    }
});

Сама таблица:
kod.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
$host = 'localhost';  // Хост, у нас все локально
$user = 'root';    // Имя созданного вами пользователя
$pass = ''; // Установленный вами пароль пользователю
$db_name = 'test';   // Имя базы данных
$link = mysqli_connect($host, $user, $pass, $db_name); // Соединяемся с базой
$db = mysqli_select_db($link, $db_name);
mysqli_set_charset($link,"utf8");
 
// Ругаемся, если соединение установить не удалось
if (!$link) {
echo 'Не могу соединиться с БД. Код ошибки: ' . mysqli_connect_errno() . ', ошибка: ' . mysqli_connect_error();
exit;
}
//echo 'подключились к базе ';
;
?>
<table id="table" border="1">
  <tr>
     <th>First name</th>
     <th>Last name</th>
     <th>Age name</th>
  </tr>
<?php
$result = mysqli_query($link,"SELECT * FROM ttable");
mysqli_set_charset($link,"utf8");
while($row = mysqli_fetch_array($result)){
   echo "<tr>
    <td>".$row['fname']."</td>
    <td>".$row['lname']."</td>
    <td>".$row['age']."</td>
    </tr>
    ";
   }
?>
</tbody>
</table>

При таком разделении нет реакции на клик. Как правильно обратиться селектору таблицы и как привязать правильно на события? В моей работе таблица меняется и поэтому не могу ее оставить на главной странице. Помогите вечному студенту ))) Спасибо.

@Davlat · 23.04.2021, 02:01 **[ТС]**

в console ругается на rows, неизвестно количество строк в таблице

Получить данные с динамически созданной таблицы

@Para bellum · 23.04.2021, 07:55

HTML5
1
2
3
First Name:<input type="text" name="fname" data-type="input"/><br /><br />
Last Name:<input type="text" name="lname" data-type="input"/><br /><br />
Age:<input type="text" name="age" data-type="input"/><br /><br />

load.js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
(function($) {
    $('#d_table').load('kod.php', function() {
        $('#table tr').click(function() {
            let $input = $('[data-type=input]');
 
            $('td', this).each(function(index) {
                $input[index].value = $(this).html();
            });
        });
    });
})(jQuery);

Важно, чтобы очередность input и колонок совпадала, тогда из определенной колонки значение подставится в нужный input.
И можно добавлять сколько угодно input и колонок в таблице, не изменяя JS-код.

@Davlat · 23.04.2021, 09:05 **[ТС]**

Спасибо

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Davlat 0 / 0 / 0 Регистрация: 22.11.2015 Сообщений: 13
	23.04.2021, 02:01 [ТС]
	в console ругается на rows, неизвестно количество строк в таблице 0

@Davlat 0 / 0 / 0 Регистрация: 22.11.2015 Сообщений: 13
	23.04.2021, 09:05 [ТС]
	Спасибо 0

Получить данные с динамически созданной таблицы

Решение