The essence of the question is this: when loading a page using JavaScript, a table with data is drawn, each line has a button "show more". How to make it so that when you click on the "more" button under the line a block or a line is drawn with additional data that relates specifically to this line.

I'm just starting my way, and here I need to finish what others have been doing, but I lack knowledge.

This is how the table is built.

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); }

There was an idea to record data in a hidden block, and when you press a button, just show it. There is a problem that the table is drawn when loading right away, and the data cannot be transferred there, or I just don’t know how to do it.

  • For better clarity, add 2-3 lines from the transmitted data parameter. - Kosmos

1 answer 1

As an option:

 $(document).ready(function(){ $(".add_info").hide(); $(".more").on("click", function(){ $(this).parent().parent().next().toggle(); }); }); 
 body { background: #20262E; padding: 20px; font-family: Helvetica; } table { background: #fff; border-radius: 5px; width: 99%; } table th { background: lightblue; } table td { width: 25%; } .add_info { background: lightgray; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr> <tr> <td>Item 1 for line 1</td> <td>Item 2 for line 1</td> <td>Item 3 for line 1</td> <td><a href="#" class="more">More...</a></td> </tr> <tr class="add_info"> <td>Add info 1 for line 1</td> <td>Add info 2 for line 1</td> <td>Add info 3 for line 1</td> <td>Add info 4 for line 1</td> </tr> <tr> <td>Item 1 for line 2</td> <td>Item 2 for line 2</td> <td>Item 3 for line 2</td> <td><a href="#" class="more">More...</a></td> </tr> <tr class="add_info"> <td>Add info 1 for line 2</td> <td>Add info 2 for line 2</td> <td>Add info 3 for line 2</td> <td>Add info 4 for line 2</td> </tr> </table>

  • Thanks for the answer. Unfortunately, I can’t provide a couple of lines to data from the database at the moment, I’ll add a couple of lines from data tomorrow morning. - Rayzoor 5:59 pm