【JS】创建动态链接的三种方式

工作之余，总结一下，请看代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>创建动态链接的三种方式</title>
     <style type="text/css">

     </style>
    </head>

     <body>
        <table border=1>
            <tr><th>id</th><th>name</th><th>value</th></tr>
            <tbody id="mytable">
                
            </tbody>
        </table>
     </body>
</html>
<script type="text/javascript">
<!--
    var datas=[];
    datas.push({id:1,name:'Andy',value:30});
    datas.push({id:2,name:'Bill',value:40});
    datas.push({id:3,name:'Cindy',value:50});
    datas.push({id:4,name:'Douglas',value:60});

    showInTable('mytable',datas);

    function showInTable(tableId,datas){
        var table=document.getElementById(tableId);

        for(var i=0;i<datas.length;i++){
            var data=datas[i];

            // 方式一：改链接的href属性，通过组合字符串实现
            var td1=document.createElement("td");
            var a1=document.createElement("a");
            a1.setAttribute('href',"javascript:alert('"+data.id+"');");
            a1.appendChild(document.createTextNode(data.id));
            td1.appendChild(a1);

            // 方式二：通过自执行函数和闭包实现
            var td2=document.createElement("td");
            var a2=document.createElement("a");
            a2.onclick=(function(name){
                return function(){
                    alert(name);
                }
            })(data.name);
            a2.setAttribute('href',"#");// 加这个主要为了出现链接的下划线
            a2.appendChild(document.createTextNode(data.name));
            td2.appendChild(a2);

            // 方式三：通过EventListener实现
            var td3=document.createElement("td");
            var a3=document.createElement("a");
            a3.setAttribute("value",data.value);
            a3.setAttribute('href',"#");// 加这个主要为了出现链接的下划线
            a3.addEventListener('click',function(e){
                var e=e||window.event;
                var me=e.target || e.srcElement;
                var value=me.getAttribute("value");
                alert(value);
            });

            a3.appendChild(document.createTextNode(data.value));
            td3.appendChild(a3);

            var tr=document.createElement("tr");
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);

            table.appendChild(tr);
        }
    }

//-->
</script>

总结：

通过代码可以发现，第一种方式是通过拼合字符串实现的，参数较多时不推荐；第三种方式是把函数要用的值存到节点属性里，虽然可以但也有一定依赖性；第二种方式虽然写法怪异，但侵入性最小，熟悉自执行函数+闭包的语法后是最值得推荐的。

END

posted @ 2021-12-07 20:15 逆火狂飙阅读(603) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2019-12-07 【Canvas与标志】白橙黄色圆角方形辐射警示牌
2014-12-07 MySQL日期函数的用法几则

2025年3月

日

一

二

三

四

五

六

【JS】创建动态链接的三种方式

常用链接

最新随笔

积分与排名

随笔分类 (2323)

个人常用链接

最新评论