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

最新推荐文章于 2021-09-19 19:07:57 发布

hogenlaw

最新推荐文章于 2021-09-19 19:07:57 发布

阅读量2.8k

点赞数 1

分类专栏： Web应用文章标签： jsp 动态生成表格添加事件

本文链接：https://blog.csdn.net/lhg_55/article/details/54709360

版权

Web应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

由于项目需要用到了动态生成表格，参照网上的方法折腾了半天，在这里做个记录,之前发现用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页面动态生成表格并为表格添加事件(续)

hogenlaw

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JSP页面动态生成表格并为表格添加事件

由于项目需要用到了动态生成表格，参照网上的方法折腾了半天，在这里做个记录,之前发现用document.createElement这种层层创建标签的方式在IE下表格不能出来<html><head> <title>Test</title> <script type="text/javascript"> var data = "张三,男,11;李四,男,12;王五,女,21;千龙,女
复制链接

扫一扫

专栏目录