簡體   English   中英

如何使 javascript 中的單元格表的 href 鏈接可點擊?

[英]How to make href link clickable for cell table in javascript?

我有一個表格來顯示我的 API 中的所有數據。 我的代碼如下所示:

<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>

問題是我希望節點 ID 列中的所有單元格表都可以使用 href 鏈接單擊。

例如,當我單擊節點 ID 列中的單元格(例如:節點 1 或節點 2 或節點 n),然后頁面將重定向到https://facebook.com

我怎樣才能做到這一點?

$('#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);

});

你可以這樣做:

<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>

修改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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM