由于项目需要用到了动态生成表格，参照网上的方法折腾了半天，在这里做个记录,之前发现用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.innerText);//取得这一行的内容
//在实际开发过程中，我们往往需要取得所选行的具体某一列的内容，可用如下方法
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++){
//datInfo[i].split(",")把一维数组再次分隔变成二维数组,二维数组的每一维对应表格的每一行,不明白可以用alert弹出一下就知道了
textHTML += "<td>" + (datInfo[i].split(","))[j] + "</td>";
}
}
textHTML += "</tr></table>";
document.getElementById("testTable").innerHTML = textHTML;
}
</script>
</head>
<body >
<!--datInfo.length-1是因为从后台传过来的data数据最后一个分号占了一行，这里我确定我生成的表格是只有3列-->
<input type="button" name="btnGo" value="生成" onclick="toTable(datInfo.length-1,3,datInfo);"/>
<br />
<p id="testTable"></p>
</body>
</html>
