【JS】JS小案例之表格操作

最新推荐文章于 2022-09-21 18:48:53 发布

龙腾四海365

最新推荐文章于 2022-09-21 18:48:53 发布

阅读量581

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/u011637069/article/details/48900379

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

【JS】JS小案例之表格操作

实现功能

要求：

点击添加可以把相应的信息添加到下面的表格中，当某一项为空的时候给出提示不能为空；

添加到表格中数据通过表格中的删除按钮可以删除任意一行。

eg：

代码如下：

<!doctype html>
<html>
  <head>
    <title>表格操作</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
      div{
        border:1px solid #ccc;
        margin:10px 0;
      }
      #d1{
        text-align:center;
      }
      #d1 input{
        margin:5px 25px 5px 0;
      }
      table{
        border:1px solid #ccc;
        width:70%;
        margin:10px auto;
        border-collapse:collapse;
        text-align:center;
      }
      table td{
        border:1px solid #ccc;
      }
      .show{
        dispaly:block;
        width:300px;
        position:absolute;
        left:500px;
        top:100px;
        background-color:#eee;
        text-align:center;
        line-height:2em;
        border:1px solid red;
        color:#520;
      }
      .hide{
        display:none;
      }
    </style>
    <script type="text/javascript">
      
      function msgAlert(){
    	var msg = document.getElementById("msg");
        msg.className="show";
        var id = setTimeout(function(){
          msg.className="hide";
          clearTimeout(id);
        },2000);
      }
      
      function check(node){
        node = node.value;
        if(node==""){
          msgAlert();
          return false;
        }else{
            return true;
        }
      }
      
      function add(){
    	var name = document.getElementById("name");
        var email = document.getElementById("email");
        var age = document.getElementById("age");
                
        if(check(name)+check(email)+check(age)==3){
        	insertIntoTable(name.value,email.value,age.value);
        }else{
          msgAlert();
        }
            
        //alert(name+email+age);
      }

      function insertIntoTable(name,email,age){
        //alert(name+email+age);
        var table = document.getElementById("t1");
        var tr = table.insertRow();
        var tdName = tr.insertCell();
        tdName.innerHTML = name;
        var tdEmail = tr.insertCell();
        tdEmail.innerHTML = email;
        var tdAge = tr.insertCell();
        tdAge.innerHTML = age;
        var tdop = tr.insertCell();
        tdop.innerHTML = "<input type='button' value='删除' οnclick=\"deleteTR(this)\"/>";
        
      }
      function deleteTR(node){
        //var parent = node.parentNode.parentNode;
        //parent.parentNode.removeChild(parent);

    	var tr = node.parentNode.parentNode;
    	var table = document.getElementById("t1");
        table.deleteRow(tr.rowIndex);
      }
      
      
          
    </script>
  </head>
  <body>
    
    <div id="d1">
      <h1>添加个人信息</h1>
      <p>
        <label for="name">姓名：</label><input type="text" id="name" οnblur="check(this);"/>
        <label for="email">邮箱：</label><input type="text" id="email" οnblur="check(this);"/>
        <label for="age">年龄：</label><input type="text" id="age" οnblur="check(this);"/>
      </p>
      <p><input type="button" value="添加" οnclick="add();"/></p>
    </div>
    <div id="d2">
      <table id="t1">
        <tr>
          <td>姓名</td>
          <td>Email</td>
          <td>年龄</td>
          <td>操作</td>
        </tr>
      </table>
    </div>
    <div id="msg" class="hide">
                      请输入相应的值，不能为空！
    </div>
  </body>
</html>