Question

我有一个html表，我想在一列中超链接条目。

这里的小例子：http://jsfiddle.net/hohenheim/uF4H7/5/ - 注意一旦你点击图表中的任何一个条形图，就会有一个onclick事件来显示表格。

在桌子上，我希望能够通过点击任何adId进行链接。即，一旦点击adId，它应该转到'www.url.com/adId#。这可以在html / js中完成吗？我已经尝试创建链接并附加它但没有取得多大成功。我是否需要重构如何将条目附加到表中？或者是否可以在桌面上创建一个点击事件？

这是关于如何生成表的代码：

function appendAds(date1) {
    nonUTCdate = new Date(date1);
    UTCdate = new Date(nonUTCdate.getUTCFullYear(), nonUTCdate.getUTCMonth(), nonUTCdate.getUTCDate());
    $('#tableTitle').html("<u>Info for " + timeConverter(UTCdate) + ":</u>");
    $("#table").find("tr:gt(0)").remove();
    $("#table tr").show();
    for (var i = 0; i < preGroupData.length; i++) {
        if ((date1 >= preGroupData[i].startDate) && (date1 <= preGroupData[i].endDate)) {;
        $('#table').append('<tr><td align="center">' + timeConverter(preGroupData[i].startDate) + '</td><td align="center">' + timeConverter(preGroupData[i].endDate) + '</td><td align="center">' + preGroupData[i].adId + '</td><td align="center">' + preGroupData[i].impressions + '</td></tr>');
       }
   }
}

Answer 1

如果我理解正确，您只需将preGroupData [i] .adId的列转换为指向“www.url.com/#adId”的链接，方法是将锚文本添加到要插入的html字符串中进入html。

替换

<td align="center">' + preGroupData[i].adId + '</td>

在你的字符串中：

<td align="center><a href='www.url.com/#" + preGroupData[i].adId +"'>" 
              + preGroupData[i].adId + "</a></td>"

Answer 2

点击处理程序：

$('tr td:nth-child(3)').click(function(){ 
   window.location.href = $(this).text()    
}

作为HTTP重定向（后退按钮不起作用）

window.location.replace("http://www.google.com");

就像点击链接一样（它将保存在会话历史记录中，因此后退按钮将按预期工作）

window.location.href = "http://www.google.com";

Answer 3

如果将单元格保存到变量，则可以轻松添加＆＃34; on click＆＃34;事件，像这样：

function appendAds(date1) {
    nonUTCdate = new Date(date1);
    UTCdate = new Date(nonUTCdate.getUTCFullYear(), nonUTCdate.getUTCMonth(),     nonUTCdate.getUTCDate());
    $('#tableTitle').html("<u>Info for " + timeConverter(UTCdate) + ":</u>");
    $("#table").find("tr:gt(0)").remove();
    $("#table tr").show();
    for (var i = 0; i < preGroupData.length; i++) {
        if ((date1 >= preGroupData[i].startDate) && (date1 <= preGroupData[i].endDate)) {;
        var row = $("<tr />")
            .append("<td align='center'>" + timeConverter(preGroupData[i].startDate) + "</td>")
            .append("<td align='center'>" + timeConverter(preGroupData[i].endDate) + "</td>");
        var adIdCell = $("<td align='center'>" + preGroupData[i].adId + "</td>").appendTo(row);

        row.append("<td align='center'>" + preGroupData[i].impressions + "</td>");

            row.appendTo("#table");
            adIdCell.on("click", function() {
                location.href = "./#" + preGroupData[i].adId;
            });
       }
   }
}

添加表条目的超链接

3 个答案: