Вывод модального окна при нажатии на строку таблицы

540

05 июня 2017, 22:04

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

есть такой блок с таким id

<div id="myModal${id}" class="modal fade">

как в js получить этот ${id}?

var id = ?????????
$("#myModal"+id).modal('show');

Answer 1

С учетом того, что при клике на строку таблицы мы можем получить индекс этой строки (правда начинающейся с нуля), то всё становится очевидно

$('table').on('click', 'tr', function(){ 
    var idx = $(this).index() + 1; 
    $('.modal').hide(); 
    $('#myModal' + idx).show(); 
});

div.modal { 
  height: 50px; 
  width: 200px; 
  background: black; 
  margin-bottom: 5px; 
  color: white; 
  text-align: center; 
  display: none; 
} 
 
 
table { 
   border-spacing: 0; 
    border-collapse: separate; 
} 
table tr td { 
  border: 1px solid black;   
  padding: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
  <tr> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
  </tr> 
  <tr> 
    <td>21</td> 
    <td>22</td> 
    <td>23</td> 
  </tr> 
  <tr> 
    <td>31</td> 
    <td>32</td> 
    <td>33</td> 
  </tr> 
</table> 
 
<div id="wrapper"> 
  <div id="myModal1" class="modal fade">1</div>  
  <div id="myModal2" class="modal fade">2</div>  
  <div id="myModal3" class="modal fade">3</div>    
<div>

Хотя непонятно зачем столько модальных окон. Вообще достаточно иметь только одно, но давать ей всегда конкретные данные для отображения. А то представь, у тебя 100 строк. Что, лепить 100 модальных окон? Это же нерационально.