Jquery загружает различное HTML-содержимое в зависимости от ячейки

Question

У меня есть следующий код, который в основном позволяет поп отображать HTML. Тем не менее, я хочу загрузить разное содержимое из разных ячеек, например, ячейка 1, определенный HTML-код, ячейка 2 разные и т.д. Я думаю добавить id = и дать каждой ячейке идентификатор с HTML, но не уверен, что этоимеет ограничения по количеству символов и как я могу назвать это во всплывающем jquery

$(document).ready(function(){
    $(".data-cell").click(function(){
    $("#popup").html("Hello <b>world!</b>");
    });
});

<div id="popup" class="popup-style">test</div>

<table>
<tr>
<td class="data-cell"></td>
<td class="data-cell"></td>
<td class="data-cell"></td>
<td class="data-cell"></td>
<td class="data-cell"></td>
<td class="data-cell"></td>
</tr>

Answer 1

Данные в строке на уровне тд

$('.key-cell').click(function() {
  $("#popup").html($(this).next().html());
});

td {
  border: solid 1px #cccccc;
  padding: 5px;
}

.data-cell { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="key-cell">A</td><td class="data-cell">A: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <td class="key-cell">B</td><td class="data-cell">B: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <td class="key-cell">C</td><td class="data-cell">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <tr>
</table>

<div id="popup"></div>

Answer 2

Одна идея: Вы могли бы дать каждой ячейке атрибут данных с индексным номером, а затем использовать его для ссылки на массив, содержащий соответствующую разметку:

var data = [
  '<div>Contents 1</div>',
  '<span>Contents 2</span>',
  'Contents 3',
]
$('.data-cell').click(function() {
  $("#popup").html(data[$(this).data('index')]);
});

td {
  border: solid 1px #cccccc;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="data-cell" data-index="0">A</td>
    <td class="data-cell" data-index="1">B</td>
    <td class="data-cell" data-index="2">C</td>
    <tr>
</table>

<div id="popup"></div>

Существует много других возможных решений, которые могут зависеть от точных обстоятельств, откуда данные берутся в первую очередь.

Answer 3

Ну, это действительно зависит от вас, как вы поддерживаете связь между нажатой ячейкой и HTML-кодом, который она должна показывать. Есть много возможных ответов. Один из способов заключается в том, чтобы сохранить карту HTML для отображения, где каждая ссылка связана с идентификатором ячейки.

JS:

let map = {
    'cell-1': '<p>Some HTML</p>',
    'cell-2': '<p>Some other HTML!</p>'
    /* etc */
}
$('body').on('click', '.data-cell', function() {
    $("#popup").html(map[$(this).attr('id')]);
});

HTML:

<td class="data-cell" id=cell-1></td>
<td class="data-cell" id=cell-2></td>
<!-- etc -->

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