Как получить значение ячейки в таблице HTML по щелчку строки из динамически сгенерированной таблицы без использования кнопок или tbody - PullRequest
Новая
       22

Как получить значение ячейки в таблице HTML по щелчку строки из динамически сгенерированной таблицы без использования кнопок или tbody

0 голосов
/ 02 мая 2018

Я хотел бы иметь возможность щелкнуть в любом месте в строке и получить содержимое первой ячейки независимо от того, где я нажимаю. Обратите внимание, что это динамически генерируемая таблица , состоящая из <th>, <tr> и <td> элементов исключительно (нет <tbody>) , и поэтому ни одна из строк в указанной таблице есть id. Комментируемая часть работает сама по себе, так почему я не могу получить текст из этой первой ячейки? Или даже только содержимое строки будет хорошим началом. Что-то не так с моими селекторами где-нибудь в функции, где я //trying to get the contents? Понятия не имею, что с этим не так. 

//  Build HTML Table
function buildHtmlTable(portalData, tablename) {
    var columns = [];
    var headerTr$ = $('<tr/>');
    var n = 0;
    if (tablename == "order-table") {
        document.getElementById("dist-name").innerText = JSON.parse(JSON.stringify(portalData[0], null, 2))["Company Name"];
        n = 1;
    }
    for (var i = 0 ; i < portalData.length ; i++) {
        var rowHash = portalData[i];
        for (var key in rowHash) {
            if ($.inArray(key, columns) == -1) {
                columns.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $('#' + tablename).append(headerTr$);
    for (i = 0 ; i < portalData.length ; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = n ; colIndex < columns.length ; colIndex++) {  // n is how many columns to drop, based on table name
            var cellValue = portalData[i][columns[colIndex]];
            if (cellValue == null) {
                cellValue = "";
            }
            row$.append($('<td/>').html(cellValue));
        }
        $('#' + tablename).append(row$);
    }

    // Drop unnecessary columns
    for(i = 0 ; i<n; i++) {
        $("#order-table").find('td,th').first().remove();
    }

    //Trying to get the contents
    $(function(){
        $("#order-table td").click(function() {     

            // var column_num = parseInt( $(this).index() ) + 1;
            // var row_num = parseInt( $(this).parent().index() );    

            // alert( "Row_num = " + row_num);   
            var column = $(this);
            var row = ($(this).parent());

            alert(row.innerText);
            alert(column.innerText);
        });
    });
}

1 Ответ

0 голосов
/ 03 мая 2018

Вы можете привязать событие щелчка к существующему элементу на странице и получить значение первой ячейки, используя навигацию DOM. Так, например, если ваша таблица уже существует на странице и вы хотите связать событие щелчка с динамически добавляемыми строками, вы можете сослаться на элемент table: 

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var value = $(this).find('td:first-child').text();
   //do something with value
  });
});

Демо

В вашем случае похоже, что вы динамически добавляете саму таблицу на страницу. В этом случае вы можете привязаться к document и ссылаться на идентификатор динамически добавляемой таблицы: 

$(document).ready(function() {
  $('document').on('click', '#order-table tr', function() {
    var value = $(this).find('td:first-child').text();
   //do something with value
  });
});

Если вы хотите, чтобы это событие щелчка было во всех таблицах, вы можете сделать: 

$(document).ready(function() {
  $('document').on('click', 'table tr', function() {
    var value = $(this).find('td:first-child').text();
   //do something with value
  });
});
...