javascript - 如何在 Firebase 动态表旁边添加一个按钮
问题描述
我有一个使用 jquery 动态生成的 html 表。代码在这里:
var $ = jQuery;
var database = firebase.database().ref();
database.child('DATA').on('child_added', function (snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function (data) {
var val = data.val();
console.log(val);
content += '<tr>';
content += '<td class="cell100 column1">' + val.date + '</td>';
content += '<td class="cell100 column2">' + val.time + '</td>';
content += '<td class="cell100 column3">' + val.temperature + '</td>';
content += '<td class="cell100 column4">' + val.heartrate + '</td>';
content += '<td class="cell100 column5" data-col="location">' + val.latitude + ',' + val.longitude + '</td>';
content += '<td class="cell100 column5"><input value="get me" type="button" class="theButton" id="ma"></td>';
});
$('#ex-table').append(content);
}
});
我希望能够从此处生成的表格中获取位置数据:此处 表格的图像。我似乎无法让它工作。我需要位置数据,以便在单击某个位置旁边的按钮时将其插入为用户重定向的谷歌地图链接中。
一点帮助将不胜感激。谢谢你。
更新: 我尝试使用此代码:
$('body').on('click', 'td[data-col]', function() {
$('#ex-table').data('col', $(this).data('col'));
alert('Selected Column: ' + $(this).data('col'));
}).on('click', 'input.theButton', function(e) {
var col,txt;
col = $('#ex-table').data('col');
txt = $(this).parent().siblings("td[data-col=" + col + "]").text();
e.preventDefault();
alert(txt);
});
但我似乎无法找到一种方法让它轻松地达到我想要的目的。它所做的只是,我需要先单击我想要获取的位置的单元格,然后单击它旁边的获取我按钮。然后会弹出一个警报,其中包含我抓取的位置数据。
我不知道如何使它达到我需要的目的。我非常需要帮助。谢谢你。
解决方案
在您的按钮 ID 上传递数据,然后尝试使用它
$(document.body).on('click', '.theButton', function (e) {
e.preventDefault();
alert($(this).attr('id'));
});
推荐阅读
- azure - Azure 应用服务 CORS MissingAllowOriginHeader 错误
- excel - 如何合并具有相同值的两行,但在 Excel 中保留两者的所有其他列数据?
- angular - 未添加 Angular 12 Http 标头
- c# - c# - 从另一个 DLL 获取 Type 对象的列表
- c++ - 具有自定义 cmp 的 priority_queue
- javascript - 将 CSP 与 nonces 用于脚本时,有没有办法在非异步资产上记录资产加载错误?
- reactjs - React Router 不维护 URL 路径
- google-maps - Google Maps API tileProvider 空白页
- r - 在 Shiny APP 中使用 bs4UserCard 的另一种方法?
- javascript - 在选择菜单中显示 1 或其他 2 个选项