Dynamically using Ajax I created a table, but it was necessary that when I clicked on an ID, a pop-up appeared with detailed information

enter image description here

$(function() { var output = $('table tbody'); $.ajax({ url: 'http://cm.mmi.macc.com.ua/tests/sample.php', type: 'GET', dataType: 'json', success: function(data) { var rows = ''; $.each(data, function(i, el) { rows += `<tr> <td>` + el.id + `</td> <td>` + el.name + `</td> <td>` + el.author + `</td> <td>` + el.date + `</td> <td>` + el.number + `</td> <tr> `; }); output.html(rows); } }); }); 
 h2 { text-align: left; } table { border-collapse: collapse; width: 100%; max-width: 750px; margin: 0 auto; } td, th { padding: 3px 5px; border: 1px solid #999; text-align: center; } th { background-color: #ccc; } hr { height: 1px; border: none; background-color: black; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center"> <h2>Demo Application Title</h2> <hr> <table> <thead> <th>ID</th> <th>Название</th> <th>Автор</th> <th>Дата выпуска</th> <th>Серийный номер</th> </thead> <tbody></tbody> </table> </div> </div> </div>

How to implement it? I tried it like this, for example:

 output.on('click', 'tr td:first-child', function() { alert($(this).text()); });

but the console swears

    2 answers 2

     $(function() { var output = $('table tbody'), layer = $('#layer'), modal = $('#modal'); $.ajax({ url: 'http://cm.mmi.macc.com.ua/tests/sample.php', type: 'GET', dataType: 'json', success: function(data) { var rows = ''; $.each(data, function(i, el) { rows += `<tr> <td data-descr="` + el.description + `" data-img="` + el.img + `">` + el.id + `</td> <td>` + el.name + `</td> <td>` + el.author + `</td> <td>` + el.date + `</td> <td>` + el.number + `</td> <tr>`; }); output.html(rows); } }); output.on('click', 'tr td:first-child', function() { var $that = $(this), tds = $that.siblings('td'), html = '<span class="close">X</span>'; html += '<h1>' + tds.eq(0).text() + '</h1>'; html += '<img src="' + $that.data('img') + '" alt="">'; html += `<ul> <li>` + tds.eq(1).text() + `</li> <li>` + tds.eq(2).text() + `</li> <li>` + tds.eq(3).text() + `</li> <li>` + tds.eq(4).text() + `</li> </ul>`; html += '<div>' + $that.data('descr') + '</div>'; modal.html(html); layer.fadeIn(); }); layer.on('click', function(e) { if (e.target === this) { $(this).fadeOut(); } }); modal.on('click', '.close', function(e) { layer.trigger('click'); }); }); 
     table { border-collapse: collapse; } td, th { padding: 3px 5px; border: 1px solid #999; } th { background-color: #ccc; } tr td:first-child { cursor: pointer; } #layer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .3); text-align: center; z-index: 100; overflow: auto; } #layer::before { display: inline-block; content: ''; height: 100%; vertical-align: middle; margin-left: -.36em; } #modal { position: relative; display: inline-block; width: 50%; min-height: 50%; padding: 10px; background: #fff; border-radius: 5px; box-shadow: 0 0 5px 3px rgba(0, 0, 0, .3); vertical-align: middle; } #modal img { max-height: 200px; } #modal ul li { display: inline-block; padding: 0 5px; } #modal ul li:not(:first-child) { border-left: 1px solid #999; } #modal .close { position: absolute; top: 0; right: 0; width: 30px; height: 30px; margin: 5px; border: 1px solid #999; border-radius: 50%; text-align: center; line-height: 30px; cursor: pointer; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <th>ID</th> <th>Название</th> <th>Автор</th> <th>Дата выпуска</th> <th>Серийный номер</th> </thead> <tbody></tbody> </table> <div id="layer"> <div id="modal"></div> </div>

    • one
      @zorro added code to button to close window - Deonis
    • ok thanks a lot - sagan

    It seems that everything works ...

     $(function() { var output = $('table tbody'); $.ajax({ url: 'http://cm.mmi.macc.com.ua/tests/sample.php', type: 'GET', dataType: 'json', success: function(data) { var rows = ''; $.each(data, function(i, el) { rows += `<tr> <td>` + el.id + `</td> <td>` + el.name + `</td> <td>` + el.author + `</td> <td>` + el.date + `</td> <td>` + el.number + `</td> <tr> `; }); output.html(rows); } }); }); $('table tbody').on('click', 'tr', function() { alert($(this).text()); }); 
     h2 { text-align: left; } table { border-collapse: collapse; width: 100%; max-width: 750px; margin: 0 auto; } td, th { padding: 3px 5px; border: 1px solid #999; text-align: center; } th { background-color: #ccc; } hr { height: 1px; border: none; background-color: black; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center"> <h2>Demo Application Title</h2> <hr> <table> <thead> <th>ID</th> <th>Название</th> <th>Автор</th> <th>Дата выпуска</th> <th>Серийный номер</th> </thead> <tbody></tbody> </table> </div> </div> </div>

    • one
      @zorro, some kind of straight riddle. Yesterday I gave you the answer and the answer is complete , with all your pop-ups and other ruches. Why did you delete the topic ( we will not specify where ) - it is absolutely not clear to me. - Deonis
    • I did not delete Denis, I received a message with the information that this question was deleted by the administrator. - sagan
    • Give an answer here and I will mark it right. Thank. - sagan