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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值