时间戳

首页 > 解决方案 > Jquery根据单元格加载不同的HTML内容

javascript - Jquery根据单元格加载不同的HTML内容

问题描述

我有以下代码，它基本上允许弹出显示 html。但是，我想从不同的单元格加载不同的内容，例如单元格 1 某个 html 代码，cell2 不同等。我正在考虑添加 id= 并给每个单元格一个带有 html 的 id，但不确定是否那样有字符限制以及如何在弹出 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>

标签： javascriptjqueryhtml

解决方案

td 级别的数据内联

$('.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>

推荐阅读