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

Question

У меня есть таблица, которая заполняется динамически. Мне нужно получить данные о ячейке, нажав на нее. Как это можно сделать.

Я заполняю таблицу следующим образом: -

 function fetchAllRecords() {
    $('#tab_logic').empty();
    var html="";
    html+="<thead> <tr>  <th scope='col'>Order Id</th> <th scope='col'>Latitude/Longitude</th> <th scope='col'>OTP</th> <th scope='col'>Call Status</th> <th scope='col'>Call Duration</th> <th scope='col'>Call Unit</th> </tr> </thead> <tbody> ";
    for (var i = 1; i <= 6; i++) {
      html+="<tr> <td onclick='tableFunction()'> <p id='trow"+i+"'> Data</p></td> <td> <p> Data </p></td> <td> <p> Data </p></td> <td> <p> Data </p></td> <td> <p> Data </p></td> <td> <p> Data </p></td></tr>"
    }
    html+="</tbody>";
    $('#tab_logic').append(html);

    }

Я пытался получить данные, как это но это не сработало

function tableFunction(){
    var txt = $(this).text();
    alert(txt);

    }

Answer 1

Вам необходимо передать this в качестве аргумента функции.

      html+="<tr> <td onclick='tableFunction(this)'> <p id='trow"+i+"'> Data</p></td> <td> <p> Data </p></td> <td> <p> Data </p></td> <td> <p> Data </p></td> <td> <p> Data </p></td> <td> <p> Data </p></td></tr>"

и затем использовать параметр функции

function tableFunction(element) {
    var txt = element.innerText;
    alert(txt);
}

Но вместо использования встроенного JavaScript, Я рекомендую вам использовать делегирование событий в jQuery. См. Привязка событий к динамически создаваемым элементам?

Answer 2

Это может быть просто достигнуто с помощью .On () для выбора динамически создаваемых строк.

$(document).on('click','td',function() {
 alert($(this).text());
});

Я бы предложил вместо прямого нацеливания на td добавить отдельный класс для динамически создаваемого td и назвать их по этому имени класса.