由于项目需要用到了动态生成表格,参照网上的方法折腾了半天,在这里做个记录,之前发现用document.createElement这种层层创建标签的方式在IE下表格不能出来
<html >
<head >
<title > Test</title >
<script type ="text/javascript" >
var data = "张三,男,11;李四,男,12;王五,女,21;千龙,女,22;" ;
var datInfo = data.split(";" );
function tr_click (row) {
row.bgColor = "#F5DEB3" ;
alert(row.getElementsByTagName("td" )[1 ].innerHTML);
alert(row.getElementsByTagName("td" )[2 ].innerHTML);
}
function toTable (rowCounts,colCounts,datInfo) {
var textHTML = '<table cellpadding="0" cellspacing="0" border="1" width="98%">' ;
textHTML+='<tr align="center"><td align="center">姓名</td><td align="center">年龄</td><td>性别</td></tr>' ;
for (var i=0 ; i<rowCounts; i++){
textHTML += '<tr align="center" height="30" onclick="tr_click(this)">' ;
for (var j=0 ; j<colCounts; j++){
textHTML += "<td>" + (datInfo[i].split("," ))[j] + "</td>" ;
}
}
textHTML += "</tr></table>" ;
document.getElementById("testTable" ).innerHTML = textHTML;
}
</script >
</head >
<body >
<input type ="button" name ="btnGo" value ="生成" onclick ="toTable(datInfo.length-1,3,datInfo);" />
<br />
<div id ="testTable" > </div >
</body >
</html >
JSP页面动态生成表格并为表格添加事件(续)