`

jQuery练习五

jQueryHTML 
阅读更多

ex-5.html 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
		<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
        <script type="text/javascript">
			$(function(){
				
				function deleteRow(aNode) {
					var $trNode = $(aNode).parent().parent() ;
					var name = $.trim($trNode.find("td:first").text()) ;
					var content = "确定要删除" + name + "的信息吗？" ;
					
					var flag = confirm(content) ;
					if(flag) {
						$trNode.remove() ;
					}
				}
				
				$("#employeetable a").click(function(){
					deleteRow(this) ;
					return false ;
				}) ;
				
				$("#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(){
								  	deleteRow(this) ;
					//禁止 submit 的自动提交
					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">
                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>
分享到：
| jQuerty练习四
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery案例练习.rar

    jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点

    jquery练习实例

    在“jQuery练习实例”这个压缩包中，我们可以期待找到一系列的示例代码和讲解，帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**：jQuery的核心在于其对DOM（Document Object Model）的操作。通过简洁...

    jquery练习

    通过练习，加深对jQuery的理解，提高编写高效、简洁代码的能力。 总结来说，jQuery作为一款强大的JavaScript库，它简化了许多前端开发中的常见任务，提高了开发效率。通过学习和实践jQuery，开发者可以更好地驾驭...

    jQuery练习

    本篇文章将深入探讨“jQuery练习”这一主题，特别关注如何使用jQuery实现导航菜单弹出二级菜单的功能。 首先，让我们理解导航菜单的基本结构。在网页设计中，导航菜单通常包含一级菜单项，当用户悬停在这些项上时，...

    Jquery部分效果练习

    本篇文章将围绕"Jquery部分效果练习"这一主题，详细阐述jQuery中的核心概念和常见效果的实现。 首先，jQuery的核心在于它的选择器。选择器类似于CSS，用于选取HTML文档中的元素。例如，`$("#id")`用于选取ID为"id...

    jQuery学习手册及实例练习

    5. **Ajax交互**：`$.ajax()`函数是jQuery的核心Ajax方法，用于异步加载数据。`$.get()`, `$.post()`是其简化的版本，用于GET和POST请求。`$.getJSON()`则专门用于获取JSON格式的数据。 6. **链式操作**：jQuery...

    jQuery基础选择器练习题

    5. **`:hidden`和`:visible`**: 选取隐藏或显示的元素。 jQuery中的内容选择器如`:has()`和`:empty`允许我们根据元素包含的内容进行选择，而属性选择器如`$("[attribute=value]")`则让我们能根据HTML属性选取元素。...

    JQuery使用练习

    本练习旨在帮助你熟悉并掌握jQuery的基本用法，包括选择器、事件、文档处理、函数以及属性的运用。 首先，让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器，允许你高效地选取DOM元素。例如，`$("#id")`...

    jQuery练习题.docx

    五、 jQuery 实现用户登录框的拖拽功能 1. CSS 样式：需要添加样式来美化登录框的外观。 2. HTML 结构：需要添加 HTML 结构来定义登录框的结构。 3. 处理拖拽事件：需要使用 jQuery 事件处理函数来处理鼠标事件，并...

    JS/JQuery-第5章上机练习.zip

    在"JS/JQuery-第5章上机练习"中，我们可以推测这章主要围绕以下几个主题展开： 1. **DOM遍历**：学习如何使用JQuery遍历DOM树，获取或修改元素及其子元素的属性。 2. **事件处理**：深入理解JQuery中的事件模型，...

    jQuery选择器上机练习题及答案.rar

    在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）查找id号为tigerLily的元素 （2）查找拥有类myList的元素 （3）查找所有的input元素 （4）查找所有img元素和tr元素 （5）查找id号为...

    jquery的相关练习

    本文件是一个小的工程，关于ajax框架的jquery的一些小的练习，与大家分享。

    jquery练习的例子，仿真google suggest

    jquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，...

    Jquery练习2：制作QQ简易聊天框.zip

    在本项目"Jquery练习2：制作QQ简易聊天框.zip"中，我们将探索如何使用jQuery这一流行的JavaScript库来创建一个类似QQ的简单聊天界面。这个练习旨在帮助开发者掌握jQuery的基本用法，以及如何利用它来增强网页的交互...

    JQuery练习题1

    5. **动画效果**: jQuery的`.animate()`方法是创建自定义动画的关键，它可以改变CSS属性并平滑过渡。`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等则是常见的动画效果。 6. **AJAX交互**: jQuery的`.ajax()`方法...

    jquery练习狂拍灰太狼.zip

    在本练习中，你将运用jQuery处理一系列与属性节点相关的任务，例如： - 灰太狼的图片显示与隐藏，通过控制`style.display`属性来实现。 - 灰太狼的位置移动，利用`data-*`自定义属性记录坐标，通过修改这些属性值并...

    前端jquery练习网页

    这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...

    Jquery练习-包含JQUERY1.4.2的js库

    标题中的“Jquery练习-包含JQUERY1.4.2的js库”指向的是一个学习资源，特别关注于jQuery 1.4.2版本的实践应用。这个版本在2010年发布，虽然不是最新版，但对于初学者来说，它仍然是理解jQuery核心概念的好起点。** ...

    js练习，jquery练习 购物车.zip

    在"js练习，jquery练习 购物车.zip"这个压缩包中，我们可以期待找到一个基于 JavaScript 和 jQuery 的购物车应用的源代码。购物车功能是电商网站的核心部分，它涉及到商品的添加、删除、数量增减以及总价计算等多个...

    js 小项目练习，jQuery 小例子

    jQuery结合HTML5的拖放API，可以创建一个用户友好的上传界面，允许用户通过拖拽文件到指定区域完成上传操作。 这些小项目展示了jQuery在实际开发中的应用，帮助初学者更好地理解和掌握jQuery的基本用法和高级技巧。...

Magicbox
Global site tag (gtag.js) - Google Analytics