【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:18  不朽的飞翔  阅读(515)  评论(0)    收藏  举报