JSP页面动态生成表格并为表格添加事件

来源：互联网发布：淘宝一件代发流程编辑：程序博客网时间：2024/05/21 12:43

由于项目需要用到了动态生成表格，参照网上的方法折腾了半天，在这里做个记录,之前发现用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 />  <div id="testTable"></div></body></html>

JSP页面动态生成表格并为表格添加事件(续)

0 0