Как добавить блок с данными в уже сгенерированную таблицу?

[joker619]

Суть вопроса такова, при загрузке страницы с помощью js рисуется таблица с данными, в каждой строке есть кнопка показать подробнее, как сделать так чтобы при нажатии на кнопку(more) под строкой рисовалось блок или строка с дополнительными данными которые относятся именно к этой строке. Я только начинаю свой путь, а тут нужно доделать то что делали другие, но мне не хватает знаний. Вот так строится таблица.

function showTable(data){

    var output = $('[name="output"]');  

    var str = '\
        <table class="table table-striped table-bordered table-condensed" id="result">'+
        '</table>';
    var table = $(str);


    var headers_order = [
        "cost_education",
        "hour_eduprogramm",
        "number",
        "more",
        "type_edu_programm_text",
        "name_eduprogramm",
        "count_files",
        "action"

    ];

    var headers_title = {
        "name_eduprogramm":"Наименование программы",
        "type_edu_programm_text":"Тип программы",
        "action": "Действия",
        "count_files": "Прикрепленные документы",
        "number":"№ п/п",
        "more": "Подробно",
        "cost_education":"Стоимость обучения",
        "hour_eduprogramm":"Кол-во часов"
    };
    var header_str = "<tr class='info'></tr>";
    var header = $(header_str);



    for(var j = 2; j<headers_order.length; j++){
        var name = headers_order[j];
        var title = headers_title[name];
        var th  ="<th align='center' style='vertical-align: middle'><strong>"+title+"</strong></th>"
        header.append(th);
    }
    table.append(header);


    for(var i =0; i<data.length; i++){
        var td_str="";
        var tr = $("<tr name='programm'></tr>");

        for(var j = 2; j<headers_order.length; j++){
            var name = headers_order[j];

            if(name == "action"){

                var title ='\
                    <button class="btn btn-default" action="edit" title="Редактировать" ><img src="/img/hamburg_edit.png" style="vertical-align: text-top"></button>\
                    <button class="btn btn-default" action="delete" title="Удалить"><img src="/img/cancel.png" style="vertical-align: text-top"></button>\
                    ';
            }
            else if (name == "more")
            {
                var title ='\
                    <button class="btn btn-default" action="more" ><img src="/img/cologne_plus.png" title="Развернуть" style="vertical-align: text-top"></button>\
                ';
            }



             else {

                var title = data[i][name];

                if(name == "address_list"){
                    var address_list="";
                    for(var k=0; k<title.length; k++){
                        var address = title[k]['full_name'];
                        address_list += "<div>"+address+"</div>";
                    }
                    title = address_list;
                }
            }


            td_str ="<td>"+title+"</td>";


            tr.append(td_str);

        }
        tr.data('values',data[i]);
        table.append(tr);


    }


    output.html(table);
}

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

[рони]

joker619,
данные которые хотите показать, это что и откуда?

[joker619]

Запрос из базы, к сожалению в данный момент их предоставить не могу, завтра утром добавлю пару строк из data.

[рони]

joker619,

tr.data('values',data[i]);
*!*
        tr.on("click", '[action="more"]', function(event) {
   var data = $(event.delegateTarget).data('values');
   $("скрытый_блок").html(data).show()
});
*/!*
        table.append(tr);