javascript編輯表格
阿新 • • 發佈：2018-11-21
javascript編輯表格
## by Rachel 2018.11.21
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> table{ width: 600px; } tr{ text-align: center; } .even{ background-color:cornflowerblue; } .odd{ background-color: darkgrey; } </style> </head> <body> <script type="text/javascript"> window.onload=function(){ var tab=document.getElementById("tab1"); var body=document.getElementsByTagName("body"); var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ trs[i].className=(i%2==0)?"even":"odd"; } } function bnt1() { var tab = document.getElementById('tab'); var rowIndex = tab.rows.length + 1; //新增一行; var tr = tab.insertRow(); var name1 = document.getElementById("name1").value; var sex=document.getElementById("sex").value; 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(); td1.innerHTML = "" + rowIndex-1; td2.innerHTML = name1; td3.innerHTML = sex; td4.innerHTML = "<a href='#' onclick='deleterow(this)'>刪除</a>"; initRows(tab); } function deleterow(obj) { var tab = document.getElementById('tab'); //獲取tr物件; var tr = obj.parentNode.parentNode; if(tab.rows.length > 1) { //tr.parentNode，指的是，table物件;移除子節點; tr.parentNode.removeChild(tr); } //重新生成行號; initRows(document.getElementById('tab')); } </script> <u>姓名</u><u><input type="text" id="name1"></u> <u>性別</u> <u> <select type="radio" id="sex"> <option>女</option> <option>男</option> <option>變態</option> </select> </u> <button onclick="bnt1()">增加按鈕</button> <table id="tab"> <tr style="background-color: dodgerblue;color: white;"onmouseout="this.style.color='yellow'"onmouseover="this.style.color='red'"> <td>編號</td> <td>姓名</td> <td>性別</td> <td>操作</td> </tr> <tbody> <tr> <td>1</td> <td id="xingming">張三</td> <td>女</td> <td><a href="#" onclick="deleterow(this)">刪除</a></td> </tr> <tr> <td>2</td> <td id="xingming">李四</td> <td>女</td> <td><a href="#" onclick="deleterow(this)">刪除</a></td> </tr> <tr> <td>3</td> <td id="xingming">王五</td> <td>男</td> <td><a href="#" onclick="deleterow(this)">刪除</a></td> </tr> </tbody> </table> </body> </html>