【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
