• 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>
    
    有些压力总是得自己扛过去,说出来就成了充满负能量的抱怨。寻求安慰无济于事,还徒增了别人的烦恼。而但你独自走过艰难险阻,一定会感谢当初一声不吭要牙坚持这的自己。没人在乎你怎样在深夜痛苦,也没人在乎你辗转反侧要熬过几个秋。外人只看结果,自己独撑过程。等我们都明白了这个道理,便不会再在人前矫情,四处诉说以求安慰。
  • 相关阅读:
    SpringBoot-Mysql模板多数据源加载
    SpringCloud-动态配置变化监控-获取变化(支持Config、Nacos)
    SpringBoot-ElasticJob封装快速上手使用(分布式定时器)
    关键字(标签)提示组件——拼音、汉字混合搜索
    写一个高性能的敏感词检测组件
    一个文件搞定Asp.net core 3.1动态页面转静态页面
    浅谈C#在网络波动时防重复提交
    对RC4算法进行改写,新的加密算法RCX。
    【ToolGood.Words】之【StringSearch】字符串搜索——基于BFS算法
    万能解决方案之彻底解决macOS cocoapods环境的所有问题
  • 原文地址:https://www.cnblogs.com/Yokemadman/p/10439521.html
Copyright © 2020-2023  润新知