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

最新推荐文章于 2023-11-09 19:50:11 发布

hogenlaw

最新推荐文章于 2023-11-09 19:50:11 发布

阅读量4.8k

点赞数 1

分类专栏： Web应用文章标签： jsp

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

版权

Web应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在上一篇文章中虽然已经为动态生成的表格添加了事件，但是运行后会发现还是有局限性的(选中一行后再选下一行这两行都会变色，肯定是不行的)，在实际开发中会用到的可能就是选中表格中的某行记录并使之变色，你可以选第一行，也可以选第二行等等，有且只能有一行选中的变色。此外，本篇文章还增加了移入行变色等效果，下面就进行稍微的修改一下

<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>