1. 程式人生 > >一個動態的表單頁面(JS+CSS)

一個動態的表單頁面(JS+CSS)

<!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>