一個動態的表單頁面（JS+CSS）
阿新 • • 發佈：2019-02-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> table{ cursor:pointer; margin: 0px auto; border-collapse: collapse; } table tr th,table tr td{ width: 120px; height: 30px; border: solid 1px #606060; } .even{ background-color: #999999; } .odd{ background-color: #ffebd6; } .change{ background-color: #A00000; } </style> <script type="text/javascript"> window.onload =function () { var items=document.getElementsByTagName("table")[0].children[1].children; for(var i=1;i<items.length;i++){ items[i].onmouseover=function () { this.className="change"; } if(i%2==0){ items[i].className="even"; items[i].onmouseout=function () { this.className="even"; } }else{ items[i].className="odd"; items[i].onmouseout=function () { this.className="odd"; } } } } function checkAll(obj) { var item=document.getElementsByName("items"); var checkAll=document.getElementById("checkALL"); if (obj.checked){ for(var i=0;i<item.length;i++){ item[i].checked=true; } } else { for(var i=0;i<item.length;i++){ item[i].checked=false; } } } </script> </head> <body > <table> <caption>可編輯表單</caption> <tbody id="main_tbody"> <tr> <th>全選<input type="checkbox" id="checkALL" onclick= "checkAll(this)"></th><th>姓名</th><th>年齡</th><th>地址</th> </tr> <tr> <td class="checkBoxTab"><input type="checkbox" name="items"></td> <td>JONES</td> <td>23</td> <td>山西省</td> </tr> <tr> <td class="checkBoxTab"><input type="checkbox" name="items"></td> <td>JONES</td> <td>23</td> <td>山西省</td> </tr> <tr> <td class="checkBoxTab"><input type="checkbox" name="items"></td> <td>JONES</td> <td>23</td> <td>山西省</td> </tr> <tr> <td class="checkBoxTab"><input type="checkbox" name="items"></td> <td>JONES</td> <td>23</td> <td>山西省</td> </tr> <tr> <td class="checkBoxTab"><input type="checkbox" name="items"></td> <td>JONES</td> <td>23</td> <td>山西省</td> </tr> <tr> <td class="checkBoxTab"><input type="checkbox" name="items"></td> <td>JONES</td> <td>23</td> <td>山西省</td> </tr> </tbody> </table> <input type="text" id="inputField" style="display: none;width:116px;height:24px"> <script> var inputField=document.getElementById("inputField"); var tdItems=document.getElementById("main_tbody").getElementsByTagName("td"); if (tdItems){ for(var i=0;i<tdItems.length;i ++){ if (tdItems[i].className=="checkBoxTab"){ continue; } tdItems[i].onfocus=function () { var text=this.innerHTML; this.innerHTML="";//需要把原來td裡的文字內容清除掉，否則會遺留相同的內容 this.appendChild(inputField); this.children[0].style.display="";//讓文字框顯示出來,這時候可以填入內容了 this.children[0].value=text;//讓原來文字內容填入該文字框，因為本表格中使用的是一個文字框，所以文字框 //失去焦點後，內容也會消失 // 因為其原來的焦點並不在文字框上，所以先讓其聚焦，等失去焦點是在進行填入操作 this.children[0].focus(); this.children[0].onblur=function () { this.parentNode.innerHTML=this.value; } } } } </script> </body> </html>