一个动态的表单页面（JS+CSS）

最新推荐文章于 2023-01-11 21:15:42 发布

张十一

最新推荐文章于 2023-01-11 21:15:42 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/weixin_40329367/article/details/80901036

版权

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

张十一

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个动态的表单页面（JS+CSS）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫