使用 javascript 在单元格内的文本上创建 url 链接

Question

我想创建一个带有标题的表格。 要在 tbody 中创建行和列，我将查询 db 并使用 javascript 填充单元格。 更重要的是，我只想使用字符串变量链接每行的第一个单元格。 下面的代码运行良好，但存在一个问题 - 仅链接一行而不是所有行。请看下图。

表格应该是这样的......

sn   |   station name  |     address       |  zone
------------------------------------------------------------
1    |  lions building | 2, moloney str,   |  2
     |  police station | lagos island,     |   
------------------------------------------------------------
2    | marako police   | new market road,  |  2
     | station         | oniru, vi, lagos. |
------------------------------------------------------------

从上表来看，sn(1) 和sn(2) 应该是联系在一起的，但事实并非如此。请参阅下面的代码和屏幕截图。

这里是变量声明

var stationName;
var zone;
var address;
var city;
var lga;
var state;
var status;
var period;
var stationid;
var db = openDatabase('pcrdb', '3.6.19', 'Police Criminal Records Database', 500*1024*1024);//500MB

此函数从数据库中查询记录并将其解析为变量

function viewStations(){
document.getElementById("viewbutton").disabled = true;
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM STATIONS', [], function (tx, results) {
for(i=0; i < results.rows.length; i++){ 
rows = results.rows.item(i);
//stationid = ("<a href = '"javascript:void(0)"'; onclick = editStation(" + rows.st_id + ");> +rows.st_id+ </a>");
stationid = rows.st_id;                 
stationName = rows.station;
address     = rows.address+", "+rows.city+", "+rows.lga;
zone        = rows.zone;

createCells();
}

}, null); 
}); 
}

在此处创建表格行和列

function createCells() {
var tbody = document.getElementById("tbody");
var row = document.createElement("tr");

var td1 = document.createElement("td");
td1.setAttribute("align","center");
td1.setAttribute("id","sn");

var td2 = document.createElement("td");
td2.setAttribute("align","center");
td2.setAttribute("id","stn");

var td3 = document.createElement("td");
td3.setAttribute("align","center");
td3.setAttribute("id","ad");

var td4 = document.createElement("td");
td4.setAttribute("align","center");
td4.setAttribute("id","zn");

var cellText1 = document.createTextNode(stationid);//append text to each cell
var celltext2 = document.createTextNode(stationName);
var celltext3 = document.createTextNode(address);
var cellText4 = document.createTextNode(zone);

td1.appendChild(cellText1);
td2.appendChild(celltext2);
td3.appendChild(celltext3);
td4.appendChild(cellText4);

row.appendChild(td1);//append columns to rows
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tbody.appendChild(row);//append row to tbody

这是链接的 stationid。在这里，只有第一行的单元格被链接。第二行没有链接。

var linktd = document.getElementById("sn").innerHTML = "<a href='javascript:void(0);' onclick='editStation(" + stationid + ");'>"+stationid+"</a>";
}

当链接的 id 被点击时，这个函数会被调用。

function editStation(){
alert("This link is not working yet. The table id is: "+stationid);
}

这是html代码

<div class="row">
<div class="col-sm col-md col-lg col-xl">
<table id="stationtable" class="table table-borderless table-hover" style="border-style:solid; border-width:0px;width:100%; height:auto; margin-radius:5px;">
<thead>
<tr>
<th style="color:brown; font-weight:bold; font-size:18px; width:5%; text-align:center;">SN</th>
<th style="color:brown; font-weight:bold; font-size:18px;width:35% text-align:center;">STATION NAME</th>
<th style="color:brown; font-weight:bold; font-size:18; width:40% text-align:center;">ADDRESS</th>
<th style="color:brown; font-weight:bold; font-size:18; width:20% text-align:center;">ZONE</th>
</tr>
</thead>
<tbody id="tbody">
<!--<tr id="tr">

</tr>-->
</tbody>
</table>

<button id="viewbutton" onclick="viewStations()">CLICK TO DISPLAY STATIONS </button>
</div>
</div>

Answer 1

这是javascript代码

//variables declaration
    //alert("Variables Initialization");
    var stationName;
    var zone;
    var address;
    var city;
    var lga;
    var state;
    var status;
    var period;
    var stationid;
    var db = openDatabase('pcrdb', '3.6.19', 'Police Criminal Records Database', 500*1024*1024);//500MB

function viewStations(){
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM STATIONS', [], function (tx, results) {
            for(i=0; i < results.rows.length; i++){ 
                stationid   = results.rows.item(i).st_id;
                stationName = results.rows.item(i).station;
                address     = results.rows.item(i).address;
                city        = results.rows.item(i).city;
                lga         = results.rows.item(i).lga;
                state       = results.rows.item(i).state;
                zone        = results.rows.item(i).zone;            
                createCells();
            }

        }, null); 
    }); 
}

function createCells() {
    var tbody = document.getElementById("tbody");
    var row = document.createElement("tr");

    /*var td1 = document.getElementById("sn");
    var td2 = document.getElementById("stn");
    var td3 = document.getElementById("ad");
    var td4 = document.getElementById("zn");*/

    var td1 = document.createElement("td");
    td1.setAttribute("align","center");
    td1.setAttribute("id","sn");

    var td2 = document.createElement("td");
    td2.setAttribute("align","center");
    td2.setAttribute("id","stn");

    var td3 = document.createElement("td");
    td3.setAttribute("align","center");
    td3.setAttribute("id","ad");

    var td4 = document.createElement("td");
    td4.setAttribute("align","center");
    td4.setAttribute("id","zn");

    var cellText1 = document.createTextNode(stationid);
    var celltext2 = document.createTextNode(stationName);
    var celltext3 = document.createTextNode(address);
    var cellText4 = document.createTextNode(zone);


    //alert("Station Name: "+stationName);

    td1.appendChild(cellText1);
    td2.appendChild(celltext2);
    td3.appendChild(celltext3);
    td4.appendChild(cellText4);

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);

    tbody.appendChild(row);[this is the new image for the workable codes][1]

}

这是html代码

<body onload="viewStations()">
<div class="row">
    <div class="col-sm col-md col-lg col-xl">
        <table id="stationtable" class="table table-borderless table-hover" style="border-style:solid; border-width:0px;width:100%; height:auto; margin-radius:5px;">
            <thead>
                <tr>
                    <th style="color:brown; font-weight:bold; font-size:18px; width:5%; text-align:center;">SN</th>
                    <th style="color:brown; font-weight:bold; font-size:18px;width:35% text-align:center;">STATION NAME</th>
                    <th style="color:brown; font-weight:bold; font-size:18; width:40% text-align:center;">ADDRESS</th>
                    <th style="color:brown; font-weight:bold; font-size:18; width:20% text-align:center;">ZONE</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <!--<tr id="tr">

                </tr>-->
            </tbody>
        </table>

        <button id="view" onclick="viewStations()">LOAD STATIONS </button>
    </div>
</div>
</body>

Answer 2

函数 createCells 用于创建新的行集：

function createCells() {
    var tbody = document.getElementById("tbody");
    var row = document.createElement("tr");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");

    td1.innerText = stationid;
    td2.innerText = stationName;
    td3.innerText = address;
    td4.innerText = zone;

    td1.setAttribute("align","center");
    td2.setAttribute("align","center");
    td3.setAttribute("align","center");
    td4.setAttribute("align","center");

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);

    tbody.append(row)
}

Answer 3

ID 是唯一的。这就是为什么您第一次执行 td1.setAttribute("id","sn"); 时会成为唯一具有该 ID 的单元格。

您需要做的是使用引用而不是 ID，如下所示：

var idCell = document.createElement('td');
idCell.innerHtml = '<a href="javascript:void(0)" onclick="editStation(' + stationId + ')">' + stationId + '</a>';
tr.appendChild(idCell)

下面的代码可以按照您的预期运行，并且内存效率更高。我稍微更改了您的 HTML（将重复样式向上移动了一级，并删除了您实际上不需要的表格行）：

<body onload="viewStations()">
<div class="row">
    <div class="col-sm col-md col-lg col-xl">
        <table id="stationtable" class="table table-borderless table-hover" style="border-style:solid; border-width:0px;width:100%; height:auto; margin-radius:5px;">
            <thead>
                <tr style="color:brown; font-weight:bold; font-size:18px; text-align:center;">
                    <th style="width:5%">SN</th>
                    <th style="width:35%">STATION NAME</th>
                    <th style="width:40%">ADDRESS</th>
                    <th style="width:20%">ZONE</th>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>

        <button id="view" onclick="viewStations()">LOAD STATIONS </button>
    </div>
</div>
</body>

这里是 Javascript（我稍微改变了你的函数）：

// This is the only variable you need.
var db = openDatabase('pcrdb', '3.6.19', 'Police Criminal Records Database', 500*1024*1024);//500MB

function editStation(stationId){
    alert("This link is not working yet. The station id is: " + stationId);
}

function viewStations (){
    document.getElementById("viewbutton").disabled = true;

    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM STATIONS', [], function (tx, results) {

        // There's no need to save the information in global
        // variables, just pass on the object you need.
        for (var i=0; i<results.rows.length; i++) {
             createCells(results.rows.item(i));
         };
        }, null); 
    }); 
}

function createCells(row) {
    var tbody = document.getElementById("tbody");

    // You need to create new lines
    var tr = document.createElement('tr');
    var stationId = row['stationid'];

    // In this case your first cell needs a different treatment 
    var idCell = document.createElement('td');
    idCell.innerHtml = '<a href="javascript:void(0)" onclick="editStation(' + stationId + ')">' + stationId + '</a>';
    tr.appendChild(idCell);

    // When handling several near identical lines it is better
    // to just use arrays. In this one, your columns are simply
    // properties of an object.
    ['stationName', 'address', 'zone'].forEach(
        function (column) {
            var td = document.createElement('td');
            td.innerText = row[column];
            tr.appendChild(td);
        }
    )

    // finally append the new line
    tbody.appendChild(tr);
}

应该可以的。