<!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" οnclick= "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>
一个动态的表单页面(JS+CSS)
最新推荐文章于 2023-01-17 13:37:46 发布