• jQuery添加删除


    //代码
    <!DOCTYPE HTML>
    <html>
       <head>
        <meta charset="utf-8">
        <title>添加记录练习<title>
        <link rel="stylesheet" type="text/css" href="css.css"/>
       </head>
       <body>
        <table id="employeeTable">
         <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Salery</th>
          <th> </th>
         </tr>
         <tr>
         <td>Tom</td>
         <td>tom@tom.com</td>
         <td>5000</td>
         <td><a href = "deleteEmp? id=001">Delete</a></td>
         </tr>
         <tr>
         <td>Jerry</td>
         <td>jerry@sohu.com</td>
         <td>8000</td>
         <td><a href = "deleteEmp? id=002">Delete</a></td>
         </tr>
         <tr>
         <td>Bob</td>
         <td>bob@tom.com</td>
         <td>10000</td>
         <td><a href = "deleteEmp? id=003">Delete</a></td>
         </tr>
        </table>
        <div id= "formDiv">
            <h4>添加新员工</h4>
            <table>
            <tr>
            <td class="word">name:</td>
            <td class="inp">
            <input type="text" name="empName" id="empName"/>
            </td>
            </tr>
            <tr>
            <td class="word">email:</td>
            <td class="inp">
            <input type="text" name="email" id="email"/>
            </td>
            </tr>
            <tr>
            <td class="word">salary:</td>
            <td class="inp">
            <input type="text" name="salary" id="salary"/>
            </td>
            </tr>
            <tr>
            <td colspan="2" align="center">
            <button id="addEmpButton" value="abc">Submit</button>
            </td>
            </tr>
            </table>
        </div>
       <script type="text/javascript" src="jquery-1.10.1.js"></script>
        <script type="text/javascript">
     //1、添加
     //2、删除
    $('#addEmpButton').click(function(){
    //1、收集输入的数据
    var $empName =$('#empName')
    var $email = $('#email')
    var $salary = $('#salary')
    var empName = $empName.val()
    var email = $email.val()
    var salary = $salary.val()
    //2、生成对应的<tr>标签结构,并插入#employeeTable的body中
    $('<tr></tr>')
        .append('<td>'+empName+'</td>')
        .append('<td>'+email+'</td>')
        .append('<td>'+salary+'</td>')
        .append('<td><a href="deletEmp?id=" '+Date.now()+'>Delete</a></td>')
        .appendTo('#employeeTable>tbody')
        .find('a')
        .click(clickDelete)
    //3、清除输入
        $empName.val('')
        $email.val('')
        $salary.val('')
    })
    //给所有删除链接绑定点击监听
    $('#employeeTable a').click(clickDelete)
    /*
    点击删除的回调函数
    */
    function clickDelete(){
        var $tr = $(this).parent().parent()
        var name = $tr.children(':first').html()
        if(confirm('确定删除'+name+'吗')){
            $tr.remove()
      }
       return false
    }
        </script>
       </body>
    </html>
    
    有些压力总是得自己扛过去,说出来就成了充满负能量的抱怨。寻求安慰无济于事,还徒增了别人的烦恼。而但你独自走过艰难险阻,一定会感谢当初一声不吭要牙坚持这的自己。没人在乎你怎样在深夜痛苦,也没人在乎你辗转反侧要熬过几个秋。外人只看结果,自己独撑过程。等我们都明白了这个道理,便不会再在人前矫情,四处诉说以求安慰。
  • 相关阅读:
    node.js 与java 的主要的区别是什么
    基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)
    Linux下SVN安装配置
    Linux查看CPU和内存使用情况
    Linux添加/删除用户和用户组
    java远程调试
    springboot和mybatis集成,自动生成model、mapper,增加mybatis分页功能
    客户端、服务端,跨域访问设置
    HTTP和HTTPS协议
    KMP算法代码
  • 原文地址:https://www.cnblogs.com/Yokemadman/p/10439521.html
Copyright © 2020-2023  润新知