1.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //删除行

         $("#employeetable a").click(function(){

             return removeTr(this);

         });

         //添加行

         $("#addEmpButton").click(function(){

             $("<tr></tr>").append("<td>"+$("#name").val()+"</td>")

                             .append("<td>"+$("#email").val()+"</td>")

                             .append("<td>"+$("#salary").val()+"</td>")

                             .append("<td><a href='deleteEmp?id=001'>Delete</a></td>")

                             .appendTo("#employeetable tbody")

                             .find("a").click(function(){

                                 return removeTr(this);

                             })

         })

         //公共函数

         function removeTr(anode){

             var $trnode=$(anode).parent().parent();

             var textContext=$trnode.find("td:first").text();

             textContext=$.trim(textContext);

             var flag=confirm("要删除"+textContext+"?");

             if(flag){

                 $trnode.remove()

             }

             return false;

         }

     })

 </script>

 </head>

 <body>

 <center>

         <br> <br>

         添加新员工 <br> <br>

         name: <input type="text" name="name" id="name" />&nbsp;&nbsp;

         email: <input type="text" name="email" id="email" />&nbsp;&nbsp;

         salary: <input type="text" name="salary" id="salary" /> <br> <br>

         <button id="addEmpButton" value="abc">Submit</button>

         <br> <br><hr><br><br>

         <table id="employeetable" border="1" cellpadding="5" cellspacing=0>

             <tbody>

                 <tr>

                     <th>Name</th>

                     <th>Email</th>

                     <th>Salary</th>

                     <th>&nbsp;</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>

             </tbody>

         </table>

     </center>

 </body>

 </html>

2.效果

　　

013 jquery中关于表格行的增删问题的更多相关文章

  1. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  2. 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

    这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...

  3. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  4. jQuery 实现添加表格行，删除行，调用日期控件

    $(function () { getdatepicker(); getdatetimepicker(); }); $(document).on('click','#addTable',addTr); ...

  5. [JS&Jquery]实现页面表格中相同内容的行或列合并

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak<script type=&qu ...

  6. jQuery对表单、表格的操作及更多应用（中：表格应用）

    内容摘录自锋利的JQuery一书 二.表格应用 1 表格隔行变色(:odd和:even选择器 P157) $(function(){ $("tr:odd").addClass(&q ...

  7. JQuery中操作表单和表格

    一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  8. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  9. 在Bootstrap开发框架中使用dataTable直接录入表格行数据（2）--- 控件数据源绑定

    在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...

随机推荐

  1. LCP 模板

    LCP Description 给定串 \(S\) . \(m\) 组询问 \((X, Y, L, R)\): 求 \(S[X,Y]\) 与 \(S[L,R]\) 的最长公共前缀. Input 第一行 ...

  2. 洛谷P4774 BZOJ5418 LOJ2721 [NOI2018]屠龙勇士（扩展中国剩余定理）

    题目链接: 洛谷 BZOJ LOJ 题目大意:这么长的题面,就饶了我吧emmm 这题第一眼看上去没法列出同余方程组.为什么?好像不知道用哪把剑杀哪条龙…… 仔细一看,要按顺序杀龙,所以获得的剑出现的顺 ...

  3. 前端学习 -- Css -- 字体分类

    在网页中将字体分成5大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这 ...

  4. 解题：HEOI 2012 朋友圈

    题面 因为$A$中只有奇偶性不同的人才能做朋友,所以A中只可能出0/1/2个人,分类讨论 然后$B$中求最大团,转成补图后正好是个二分图(不然就不用做了),求最大点独立集=总点数-最大匹配 我洛谷上交 ...

  5. java开发爬虫Deno

    java开发爬虫Deno 身为一个程序员不会两三手爬虫怎么能在行业里立足啊,这是开发中自己写的一个java爬虫的Demo,供大家参考. java爬虫的开发依赖于jsoup.jar 直接上代码 publ ...

  6. 烦人的IE7、8,半透明滤镜(filter:alpha)失效、png半透明失效的解决办法

    在项目中的问题,之前用的是用IETest测试IE7,8发现背景透明设置无效,后来找文章解决!看了一些资料,做下总结. 几种IE半透明CSS样式 IE8里可以这样写 -ms-filter:”progid ...

  7. Saltstack-API（十二）

    Saltstack-API 官方文档 https://docs.saltstack.com/en/latest/ref/netapi/all/salt.netapi.rest_cherrypy.htm ...

  8. Java基础-编写问候语-“Hello World”

    Java基础-编写问候语-“Hello World” 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编写“Hello World”程序 1>.编写源代码 任何文本编辑起都 ...

  9. S折交叉验证(S-fold cross validation)

    S折交叉验证(S-fold cross validation) 觉得有用的话,欢迎一起讨论相互学习~Follow Me 仅为个人观点,欢迎讨论 参考文献 https://blog.csdn.net/a ...

  10. [整理]WebAPP开发的框架

    http://www.zhihu.com/question/27210335 http://ionicframework.com/getting-started/ http://cordova.apa ...