[英]How to make href link clickable for cell table in javascript?
I have a table to show all the data from my API.我有一个表格来显示我的 API 中的所有数据。 My code is look like this:我的代码如下所示:
<div class="table-responsive">
<h1>List Existing Node</h1>
<br/>
<table class="table table-bordered table-striped" id="node_table">
<tr>
<th>Node Id</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Location</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("/api/node/", function(data){
var node_data = '';
$.each(data, function(key, value){
node_data += '<tr>';
node_data += '<td>'+value.node_id;
node_data += '<td>'+value.latitude;
node_data += '<td>'+value.longitude;
node_data += '<td>'+value.location;
node_data += '</tr>';
});
$('#node_table').append(node_data);
console.log(data);
});
});<script>
The problem is I want all of the cell table in Node Id column can be clicked using href link.问题是我希望节点 ID 列中的所有单元格表都可以使用 href 链接单击。
For example when I click a cell (ex: node 1 or node 2 or node n) in Node Id column and then the page will be redirect to https://facebook.com例如,当我单击节点 ID 列中的单元格(例如:节点 1 或节点 2 或节点 n),然后页面将重定向到https://facebook.com
How can I do that?我怎样才能做到这一点?
$('#node_table').on('click', 'tr', function() {
var href = $(this).data('href');
window.location.href = href;
})
$.getJSON("/api/node/", function(data){
var node_data = '';
$.each(data, function(key, value){
node_data += '<tr data-href="your link here">';
node_data += '<td>'+value.node_id;
node_data += '<td>'+value.latitude;
node_data += '<td>'+value.longitude;
node_data += '<td>'+value.location;
node_data += '</tr>';
});
$('#node_table').append(node_data);
console.log(data);
});
You can do this:你可以这样做:
<div class="table-responsive">
<h1>List Existing Node</h1>
<br/>
<table class="table table-bordered table-striped" id="node_table">
<tr>
<th>Node Id</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Location</th>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
$.getJSON("/api/node/", function(data){
var node_data = '';
$.each(data, function(key, value){
node_data += '<tr>';
node_data += '<td> <a href="https://facebook.com/">'+value.node_id+'</a></td>';
node_data += '<td>'+value.latitude;
node_data += '<td>'+value.longitude;
node_data += '<td>'+value.location;
node_data += '</tr>';
});
$('#node_table').append(node_data);
console.log(data);
});
});<script>
Modify the ready
callback as follows:修改ready
回调如下:
$.getJSON( '/api/node/', function(data){
var node_data = '';
var href = 'https://facebook.com';
$.each(data, function(key, value){
node_data += '<tr>';
node_data += '<td> <a href="' + href + '">' + value.node_id + '</a></td>';
node_data += '<td>' + value.latitude + '</td>';
node_data += '<td>' + value.longitude + '</td>';
node_data += '<td>' + value.location + '</td>';
node_data += '</tr>';
});
$('#node_table').append(node_data);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.