JSP頁面動態生成表格併為表格新增事件

hogen發表於2017-12-29
JS事件

由於專案需要用到了動態生成表格，參照網上的方法折騰了半天，在這裡做個記錄，之前發現用 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>複製程式碼

相關文章