<body> <form name="myForm"> <table width="100%" id="tab" name="tab" border="0px" style="text-align:center;"> <tr style="background-color:0099FF;color:black;"> <td>選擇</td> <td>編號</td> <td>姓名</td> <td>年齡</td> <td>地址</td> <td>操作</td> <td>操作</td> </tr> <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)"> <td><input type='hidden'><input type="checkbox" value="11"/></td> <td>100</td> <td>張三</td> <td>15</td> <td>湖南株洲</td> <td><a href="#" onclick="addRow()">添加</a></td> <td><a href="#" onclick="deleteRow(this)">刪除</a></td> </tr> <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)"> <td><input type="checkbox" value="22"/></td> <td>101</td> <td>李四</td> <td>15</td> <td>湖南長沙</td> <td><a href="#" onclick="addRow()">添加</a></td> <td><a href="#" onclick="deleteRow(this)">刪除</a></td> </tr> <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)"> <td><input type="checkbox" value="33"/></td> <td>102</td> <td>王五</td> <td>15</td> <td>湖南湘潭</td> <td><a href="#" onclick="addRow()">添加</a></td> <td><a href="#" onclick="deleteRow(this)">刪除</a></td> </tr> </table> </form> </body>
以下是使用javascript對表格的添加行,刪除行,進行操作..
具體代碼如下:
style樣式代碼:
<style> .displayStyle{ background-color:00FFFF; } .hideStyle{ background-color:#FFFFF; } .onClickStyle{ background-color:00FF00; } a{ color:red; } a:hover{ color:green; } </style>
javascript代碼:
<script> var selectRow=null; //單擊時,改變樣式; function onClickChangeStyle(obj){ //獲取表格對象; var tab = document.getElementById("tab"); //獲取當前行選擇下標; var currentRowIndex = obj.rowIndex; //獲取表格所有行數; var tablRows = tab.rows.length; //獲取表格第一行,第一列的值; //var firstCellValue = tab.rows[0].cells[0].innerHTML; //獲取表格的第一行，第一列的第一個元素的值; //var firstChildValue = tab.rows[0].cells[0].firstChild.value; //循環表格的所有行;並且選擇的當前行，改變背景顏色； for(var i = 1;i<tablRows;i=i+1){ if(currentRowIndex == i){ //為選中的當前，設置css樣式; selectRow = tab.rows[i]; tab.rows[i].className= "onClickStyle"; }else{ //把沒有選中的行的背景樣式設置為白色; tab.rows[i].className= "hideStyle"; } } } //鼠標移入時，改變顏色; function onmouseOverMethod(selectThis){ selectThis.className="displayStyle"; if(selectRow==selectThis){ selectThis.className="onClickStyle"; } } //鼠標移除時，改變背景顏色; function onmouseOutMethod(selectThis){ selectThis.className="hideStyle"; if(selectRow == selectThis){ selectThis.className="onClickStyle"; } } //添加行; function addRow(){ var tab = document.getElementById('tab'); var rowIndex = tab.rows.length+1; //添加一行; var tr = tab.insertRow(); tr.onmouseover = tr.className="displayStyle" ; tr.onmouseout = tr.className="hideStyle" ; tr.onclick=function (){this.className="onClickChangeStyle(this)";} var td1 = tr.insertCell(); var td2 = tr.insertCell(); var td3 = tr.insertCell(); var td4 = tr.insertCell(); var td5 = tr.insertCell(); var td6 = tr.insertCell(); var td7 = tr.insertCell(); td1.innerHTML = "<input type='hidden'/><input type='checkbox' value = '1'>"; td2.innerHTML = ""+rowIndex; td3.innerHTML = "測試"; td4.innerHTML = "22"; td5.innerHTML = "無地址"; td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>"; td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>刪除</a>"; //初始化行; initRows(tab); } //初始化行,設置序列號; function initRows(tab){ var tabRows = tab.rows.length; for(var i = 0;i<tabRows.length;i++){ tab.rows[i].cells[0].firstChild.value=i; } } //刪除行;(obj代表連接對象) function deleteRow(obj){ var tab = document.getElementById('tab'); //獲取tr對象; var tr = obj.parentNode.parentNode; if(tab.rows.length>2){ //tr.parentNode，指的是，table對象;移除子節點; tr.parentNode.removeChild(tr); } //重新生成行號; initRows(document.getElementById('tab')); } </script>