Могу ли я динамически создавать выпадающие строки для таблицы, используя HTML и Javascript - PullRequest
0 голосов
/ 01 мая 2018

Я создал таблицу динамически, но теперь я хочу создать раскрывающуюся строку по требованию. У меня есть обработчик onclick для каждой строки. После щелчка эта строка должна опускать что-то вниз (например, скрытый div, но, к сожалению, их нельзя легко создать в динамическом режиме, поскольку при создании строки невозможно назначить уникальный идентификатор. Возможно ли это даже в Javascript / jQuery? Или , желательно, твиттер бутстрап?

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();
    }
    if (tablename == "order-table") {
        var tablerows = document.getElementsByTagName('tr');
        for (var x in tablerows) {      
            tablerows[x].classList.add("clickable");
            tablerows[x].setAttribute(data-toggle,"collapse");
            tablerows[x].setAttribute(data-target,"");
        }   
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...