Javascript-форум - Видимость элемента getElementById

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Видимость элемента getElementById (https://javascript.ru/forum/misc/49326-vidimost-ehlementa-getelementbyid.html)

Видимость элемента getElementById

Есть табличка выводимая при загрузке страницы с данными из БД

Код:

<div id="firstresult">

            <table id="tableID" class="table table-condensed table-nonfluid">

            <?php

            while($row = mysql_fetch_array($res))

            {

                echo '<tr class="alt">

                <td>'.$row['name'].'</td>

                <td>'.$row['username'].'</td>

              </tr>';

            }

            ?>

            </table>

</div>

Есть функция которая отслеживает нажатия на строки таблицы, и дает значение первой ячейки строки:

window.onload = function(){
    var table = document.getElementById("table1");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].onclick = function () {
                 alert(this.cells[0].innerHTML);
            };
        }
    }

Есть Ajax который который выдает новую отсортированную таблицу, которую генерирует другой php и вставляет в <div id="firstresult">
Код таблицы как и изначальный.
Но если для изначальной таблицы onclick события работают, то для обновленной таблицы переданной из другого php файла, уже нет. У таблиц стоят одинаковые id.
Как тут нужно делать?

присваивайте onclick при генерации новой таблицы.

Цитата:

Сообщение от Viral (Сообщение 324820)

присваивайте onclick при генерации новой таблицы.

к сожалению не могу понять, что нужно делать.
не могли бы вы разъяснить мои последующие действия

Цитата:

Сообщение от lavds (Сообщение 324818)

Есть Ajax который который выдает новую отсортированную таблицу, которую генерирует другой php и вставляет в <div id="firstresult">
Код таблицы как и изначальный.

При изначальной загрузке страницы ваша функция вешает onclick на уже имеющиеся на странице строки таблицы.
Чтобы все работало надо запустить ту же функцию, чтобы она повесила onclick на новые созданные строки этой таблицы, на которых его еще нет.

Цитата:

Сообщение от Viral (Сообщение 324828)

этот момент понятен

Как мне повесить эту функцию на новый элемент, увы не знаю :(

Ну.. вероятно, у вас есть JS функция, которая кидает элементы, которые вернул ajax запрос, в таблицу. Не видя кода трудно сказать, но если грубо, то после строчки, которая вставляет новые элементы в таблицу, вероятно надо вставить

var table = document.getElementById("table1");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].onclick = function () {
                 alert(this.cells[0].innerHTML);
            };
        }

lavds,

document.querySelector("#firstresult").addEventListener("click", function (event) {

   if (event.target.tagName == "TD") {
      //клик на ячейку
   }

}, true);

Код требует доработки для кроссбраузерности и содержимого таблицы, но подход должен быть ясен :)
1 обработчик на все строки и не важно новые они или старые.

<div id="firstresult">
   <table>
      <tr><td>1</td><td>2</td></tr>
   </table>
</div>
<button onclick="document.querySelector('#firstresult').innerHTML = '<table><tr><td>3</td><td>4</td></tr></table>'; return false;">
Обновить таблицу!
</button>
<script>
document.querySelector('#firstresult').addEventListener("click", function (event) {

   if (event.target.tagName == "TD") {
      alert(event.target.innerHTML);
   }

}, true);
</script>

Цитата:

Сообщение от tsigel (Сообщение 324833)

lavds,

document.querySelector("#firstresult").addEventListener("click", function (event) {

   if (event.target.tagName == "TD") {
      //клик на ячейку
   }

}, true);

а как получить родительский tr для этого td.
Мне нужен текст первой ячейки в строке, при нажатии в любую ячейку строки