首页 > 解决方案 > 如何在 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);
});

但我似乎无法找到一种方法让它轻松地达到我想要的目的。它所做的只是,我需要先单击我想要获取的位置的单元格,然后单击它旁边的获取我按钮。然后会弹出一个警报,其中包含我抓取的位置数据。

我不知道如何使它达到我需要的目的。我非常需要帮助。谢谢你。

标签: javascriptjqueryhtmlfirebase

解决方案


在您的按钮 ID 上传递数据,然后尝试使用它

$(document.body).on('click', '.theButton', function (e) {
    e.preventDefault();

    alert($(this).attr('id'));
});

推荐阅读