由于项目需要用到了动态生成表格，参照网上的方法折腾了半天，在这里做个记录，之前发现用 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(){
var oObj = window.event.srcElement;//在下面调用这个方法时便可以不用传this了
//可以选择不同的贷款记录
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
//document.all.table1.rows.length;//总的表格行数(包括表头)
for(var i=1; i<document.all.table1.rows.length; i++){//table1:表格的Id
document.all.table1.rows[i].style.backgroundColor = "";
document.all.table1.rows[i].tag = false;
}
oTr.style.backgroundColor = "#F5DEB3";
oTr.tag = true;
alert(oTr.getElementsByTagName("td")[0].innerHTML);
// alert(oTr.innerText);//得到整行的信息
}
}
//鼠标移动到选择行上时的行变色
function over(){
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
if(!oTr.tag) oTr.style.backgroundColor = "#E1E9FD";
}
}
//鼠标移出另外一行时关闭已选行变色
function out() {
var oObj = event.srcElement;
if(oObj.tagName.toLowerCase() == "td"){
var oTr = oObj.parentNode;
if(!oTr.tag) oTr.style.backgroundColor = "";
}
}
function toTable(rowCounts,colCounts,datInfo){
var textHTML = '<table id="table1" 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()" onMouseOver="over()" onMouseOut="out()">';//为每一行添加点击事件
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 />
<div id="testTable"></div>
</body>
</html>
