工作之余，总结一下，请看代码：
<!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