繁体   English   中英

在JavaScript中将带有锚标签的动态生成的td包装起来

[英]wrap a dynamically generated td with anchor tag in javascript

请帮忙! 我正在从外部域获取RSS feed,并且正在使用javascipt为每个项目(标题,日期,链接)生成,现在'link'项目作为属性而不是链接,因此如何将该链接设置为锚标记或将其链接到所需的链接? 即,如何用锚标签包装这些内容?

在此先感谢您,感谢您的帮助。

这是我的脚本:

for (var i = 0; i < items.length; i++) {

        var item = items[i];
        // Get the title from the element.  firstChild is the text node containing
        // the title, and nodeValue returns the value of it.
        var title = item.getElementsByTagName('title')[0].firstChild.nodeValue;
        var pubDate = item.getElementsByTagName('pubDate')[0].firstChild.nodeValue;
       var link =item.getElementsByTagName('link')[0].firstChild.nodeValue;//

        //var link ='<a href="' + item.getElementsByTagName('link')[0].firstChild.nodeValue + '">';//


        var table = document.createElement('table');

        var tr = [];

        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');



        var text1 = content.appendChild(document.createTextNode(title));
        var text2 = content.appendChild(document.createTextNode(pubDate));
        var text3 = content.appendChild(document.createTextNode(link));



        for (var i2 = 1; i2 < 4; i2++) {
            tr[i2] = document.createElement('tr');
            for (var j = 1; j < 4; j++) {
                td1.appendChild(text1);
                td2.appendChild(text2);
                td3.appendChild(text3);
                tr[i2].appendChild(td1);
                tr[i2].appendChild(td2);
                tr[i2].appendChild(td3);

            }//End of nested FOR
            table.appendChild(tr[i2]);

        } // end of Parent FOR

        tablearea.appendChild(table);

我想有更好的方法,例如使用div代替表,但是在这个问题的约束范围内,可以简单地具有与锚点/链接相同的行为吗? 如果是这样,也许您可​​以简单地将此代码添加到循环中。

Javascript:

tr[i2].className="link" //class for some UX hints
tr[i2].onclick=(function(link){
  return function(e){
    e.preventDefault();
    location.href=link
  }
})(link)

CSS:

tr.link {cursor:pointer}
tr.link:hover {background:#FF0}

这应该允许用户单击行上的任何位置以跟随链接

范例连结

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM