在我的网页中,我使用把手填充表格并从数据库中获取值:
<table>
<tbody id="myDiv">
{{# each alarms}}
<tr class="row100 body">
<td class="cell100 column1"><a href="#" id="btn_exp">{{ this.alm_id }}</a></td>
<td class="cell100 column2><a href="#">{{ this.message }}</a></td>
<td class="cell100 column3"><a href="#">{{ this.level }}</a></td>
</tr>
{{/each}}
</tbody>
</table>
现在,我希望这些行是可单击的,并根据该行打开一个特定的弹出窗口(将对该行进行描述)。
所以我写了这个:
<script>
var modal_exp = document.getElementById('myModal_explanatory');
var btn_exp = document.getElementById("myBtn_exp");
var span_exp = document.getElementById("close_exp");
btn_exp.onclick = function() { modal_exp.style.display = "block"; }
span_exp.onclick = function() { modal_exp.style.display = "none"; }
window.onclick = function(event) {
if (event.target == modal_exp) { modal_exp.style.display = "none"; }
}
</script>
在表格外部调用弹出窗口时,效果很好。 在表内部,它行不通,问题是我为每一行分配了相同的ID,并且它不知道所指的是哪一行。
我不知道该如何解决。 想法是每行都有一个不同的ID(可以使用车把来实现,例如 id =“ myBtn-{{this.id}}” ,但是我不知道如何分配将其保存到脚本内的 bin_exp 变量中。
答案 0 :(得分:1)
使用类的方法比ID更好。类是将标识符应用于相似元素的好方法。在这种情况下,您需要一种将点击事件应用于多个btn-exp
的方法。
要将数据传递到元素,请利用元素上的data属性。您可以将所需把手中的所有数据传递到属性中,以便以后使用JavaScript进行访问。
<table>
<tbody id="myDiv">
{{# each alarms}}
<tr class="row100 body">
<td class="cell100 column1">
<!-- Class will be used to select all .btn_exp and from their events you can access the unique data -->
<a href="#" class="btn_exp" data-alm-id="{{this.alm_id}}">
{{ this.alm_id }}
</a>
</td>
<td class="cell100 column2><a href="#">{{ this.message }}</a></td>
<td class="cell100 column3"><a href="#">{{ this.level }}</a></td>
</tr>
{{/each}}
</tbody>
</table>
var modal_exp = document.getElementById('myModal_explanatory');
var btn_exp = document.querySelectorAll('.btn_exp'); // This returns a NodeList of the .btn_exp objects
var span_exp = document.getElementById("close_exp");
span_exp.onclick = function() { modal_exp.style.display = "none"; }
btn_exp.forEach(function(button) {
button.addEventListener('click', function(event) {
// Through the event object you can get the unique instance of .btn_exp that you clicked
var button = event.currentTarget
modal_exp.style.display = "block";
// If you wanted to get the data-alm-id value for this specific button you can access it like this
var button_alm_id = button.dataset.almId // dashes are converted to Camel case
// ... Do what ever you want with this value
});
});
有关querySelector()
和querySelectorAll()
的更多信息,请在此处https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector签出MDN