JQuery（学习笔记六）JQuery常用实例

阳光穿透心脏的1/2处 2022-05-14 12:25 144阅读 0赞

几个简单例子的实现

# （一）表格隔行变色 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp; &lt;meta charset="UTF-8"&gt; &nbsp; &lt;title&gt;表格隔行变色&lt;/title&gt; &nbsp; &lt;style&gt; &nbsp; &nbsp; div, span, p { &nbsp; &nbsp; &nbsp; width: 140px; &nbsp; &nbsp; &nbsp; height: 140px; &nbsp; &nbsp; &nbsp; margin: 5px; &nbsp; &nbsp; &nbsp; background: #aaa; &nbsp; &nbsp; &nbsp; border: #000 1px solid; &nbsp; &nbsp; &nbsp; float: left; &nbsp; &nbsp; &nbsp; font-size: 17px; &nbsp; &nbsp; &nbsp; font-family: Verdana; &nbsp; &nbsp; } &nbsp; &nbsp; div.mini { &nbsp; &nbsp; &nbsp; width: 55px; &nbsp; &nbsp; &nbsp; height: 55px; &nbsp; &nbsp; &nbsp; background-color: #aaa; &nbsp; &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; } &nbsp; &nbsp; div.hide { &nbsp; &nbsp; &nbsp; display: none; &nbsp; &nbsp; } &nbsp; &nbsp; #data { &nbsp; &nbsp; &nbsp; width: 600px; &nbsp; &nbsp; } &nbsp; &nbsp; #data, td, th { &nbsp; &nbsp; &nbsp; border-collapse: collapse; &nbsp; &nbsp; &nbsp; border: 1px solid #aaaaaa; &nbsp; &nbsp; } &nbsp; &nbsp; th, td { &nbsp; &nbsp; &nbsp; height: 28px; &nbsp; &nbsp; } &nbsp; &nbsp; #data thead { &nbsp; &nbsp; &nbsp; background-color: #333399; &nbsp; &nbsp; &nbsp; color: #ffffff; &nbsp; &nbsp; } &nbsp; &nbsp; .odd { &nbsp; &nbsp; &nbsp; background-color: #ccccff; &nbsp; &nbsp; } &nbsp; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="data"&gt; &nbsp; &lt;thead&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;th&gt;姓名&lt;/th&gt; &nbsp; &nbsp; &lt;th&gt;工资&lt;/th&gt; &nbsp; &nbsp; &lt;th&gt;入职时间&lt;/th&gt; &nbsp; &nbsp; &lt;th&gt;操作&lt;/th&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;/thead&gt; &nbsp; &lt;tbody&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Tom&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;$3500&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;2018-10-25&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="javascript:void(0)"&gt;删除&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Mary&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;$3400&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;2018-12-1&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="javascript:void(0)"&gt;删除&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;King&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;$5900&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;2019-08-17&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="javascript:void(0)"&gt;删除&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Scott&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;$3800&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;2018-11-17&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="javascript:void(0)"&gt;删除&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Smith&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;$3100&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;2019-01-27&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="javascript:void(0)"&gt;删除&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Allen&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;$3700&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;2019-12-05&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="javascript:void(0)"&gt;删除&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;/tbody&gt; &lt;/table&gt; &lt;script src="jquery-1.10.1.js"&gt;&lt;/script&gt; &lt;script&gt; &nbsp; $("#data&gt;tbody&gt;tr:odd").attr('class', 'odd') &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

效果：

![70][]

# （2）多Tab点击切换 #

效果：

![70 1][]

# 三、导航动态显示效果 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp; &lt;meta charset="UTF-8"&gt; &nbsp; &lt;title&gt;导航动态显示效果&lt;/title&gt; &nbsp; &lt;script src="jquery-1.10.1.js"&gt;&lt;/script&gt; &nbsp; &lt;style rel="stylesheet"&gt; &nbsp; &nbsp; * { &nbsp; &nbsp; &nbsp; margin: 0; &nbsp; &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; &nbsp; word-wrap: break-word; &nbsp; &nbsp; &nbsp; word-break: break-all; &nbsp; &nbsp; } &nbsp; &nbsp; body { &nbsp; &nbsp; &nbsp; background: #FFF; &nbsp; &nbsp; &nbsp; color: #333; &nbsp; &nbsp; &nbsp; font: 12px/1.6em Helvetica, Arial, sans-serif; &nbsp; &nbsp; } &nbsp; &nbsp; a { &nbsp; &nbsp; &nbsp; color: #0287CA; &nbsp; &nbsp; &nbsp; text-decoration: none; &nbsp; &nbsp; } &nbsp; &nbsp; a:hover { &nbsp; &nbsp; &nbsp; text-decoration: underline; &nbsp; &nbsp; } &nbsp; &nbsp; ul, li { &nbsp; &nbsp; &nbsp; list-style: none; &nbsp; &nbsp; } &nbsp; &nbsp; img { &nbsp; &nbsp; &nbsp; border: none; &nbsp; &nbsp; } &nbsp; &nbsp; h1, h2, h3, h4, h5, h6 { &nbsp; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; } &nbsp; &nbsp; html { &nbsp; &nbsp; &nbsp; overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/ &nbsp; &nbsp; } &nbsp; &nbsp; #navigation { &nbsp; &nbsp; &nbsp; width: 784px; &nbsp; &nbsp; &nbsp; padding: 8px; &nbsp; &nbsp; &nbsp; margin: 8px auto; &nbsp; &nbsp; &nbsp; background: #3B5998; &nbsp; &nbsp; &nbsp; height: 18px; &nbsp; &nbsp; } &nbsp; &nbsp; #navigation ul li { &nbsp; &nbsp; &nbsp; float: left; &nbsp; &nbsp; &nbsp; margin-right: 14px; &nbsp; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; &nbsp; z-index: 100; &nbsp; &nbsp; } &nbsp; &nbsp; #navigation ul li a { &nbsp; &nbsp; &nbsp; display: block; &nbsp; &nbsp; &nbsp; padding: 0 8px; &nbsp; &nbsp; &nbsp; background: #EEEEEE; &nbsp; &nbsp; &nbsp; font-weight: 700; &nbsp; &nbsp; } &nbsp; &nbsp; #navigation ul li a:hover { &nbsp; &nbsp; &nbsp; background: none; &nbsp; &nbsp; &nbsp; color: #fff; &nbsp; &nbsp; } &nbsp; &nbsp; #navigation ul li ul { &nbsp; &nbsp; &nbsp; background-color: #88C366; &nbsp; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; &nbsp; width: 80px; &nbsp; &nbsp; &nbsp; overflow: hidden; &nbsp; &nbsp; &nbsp; display: none; &nbsp; &nbsp; } &nbsp; &nbsp; #navigation ul li ul li { &nbsp; &nbsp; &nbsp; border-bottom: 1px solid #BBB; &nbsp; &nbsp; &nbsp; text-align: left; &nbsp; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; } &nbsp; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="navigation"&gt; &nbsp; &lt;ul&gt; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;首 页&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &lt;li&gt; &nbsp; &nbsp; &nbsp; &lt;a href="#"&gt;衬 衫&lt;/a&gt; &nbsp; &nbsp; &nbsp; &lt;ul&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;短袖衬衫&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;长袖衬衫&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;无袖衬衫&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp; &lt;/li&gt; &nbsp; &nbsp; &lt;li&gt; &nbsp; &nbsp; &nbsp; &lt;a href="#"&gt;卫 衣&lt;/a&gt; &nbsp; &nbsp; &nbsp; &lt;ul&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;开襟卫衣&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;套头卫衣&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp; &lt;/li&gt; &nbsp; &nbsp; &lt;li&gt; &nbsp; &nbsp; &nbsp; &lt;a href="#"&gt;裤 子&lt;/a&gt; &nbsp; &nbsp; &nbsp; &lt;ul&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;休闲裤&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;卡其裤&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;牛仔裤&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;短裤&lt;/a&gt;&lt;/li&gt; &nbsp; &nbsp; &nbsp; &lt;/ul&gt; &nbsp; &nbsp; &lt;/li&gt; &nbsp; &nbsp; &lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt; &nbsp; &lt;/ul&gt; &lt;/div&gt; &lt;script&gt; &nbsp; $("#navigation&gt;ul&gt;li:has(ul)").hover(function () { &nbsp; &nbsp; $(this).children("ul").stop().slideDown(400) &nbsp; }, function () { &nbsp; &nbsp; $(this).children("ul").stop().slideUp("fast") &nbsp; }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 2][]

# 四、爱好选择器 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &nbsp; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &nbsp; &lt;title&gt;全选&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &nbsp; 你爱好的运动是？&lt;input type="checkbox" id="checkedAllBox"/&gt;全选/全不选 &nbsp; &lt;br/&gt; &nbsp; &lt;input type="checkbox" name="items" value="足球"/&gt;足球 &nbsp; &lt;input type="checkbox" name="items" value="篮球"/&gt;篮球 &nbsp; &lt;input type="checkbox" name="items" value="羽毛球"/&gt;羽毛球 &nbsp; &lt;input type="checkbox" name="items" value="乒乓球"/&gt;乒乓球 &nbsp; &lt;br/&gt; &nbsp; &lt;input type="button" id="checkedAllBtn" value="全　选"/&gt; &nbsp; &lt;input type="button" id="checkedNoBtn" value="全不选"/&gt; &nbsp; &lt;input type="button" id="checkedRevBtn" value="反　选"/&gt; &nbsp; &lt;input type="button" id="sendBtn" value="提　交"/&gt; &lt;/form&gt; &lt;script src="jquery-1.10.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; &nbsp; /* &nbsp; &nbsp;功能说明: &nbsp; &nbsp;1. 点击'全选': 选中所有爱好 &nbsp; &nbsp;2. 点击'全不选': 所有爱好都不勾选 &nbsp; &nbsp;3. 点击'反选': 改变所有爱好的勾选状态 &nbsp; &nbsp;4. 点击'全选/全不选': 选中所有爱好, 或者全不选中 &nbsp; &nbsp;5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态 &nbsp; &nbsp;6. 点击'提交': 提示所有勾选的爱好 &nbsp; &nbsp;*/ &nbsp; $(function () { &nbsp; &nbsp; var $Items = $(':checkbox[name=items]') &nbsp; &nbsp; var $checkedAllBox = $('#checkedAllBox') &nbsp; &nbsp; // 1. 点击'全选': 选中所有爱好 &nbsp; &nbsp; $('#checkedAllBtn').click(function () { &nbsp; &nbsp; &nbsp; $Items.prop('checked', true) &nbsp; &nbsp; &nbsp; $checkedAllBox.prop('checked', true) &nbsp; &nbsp; }) &nbsp; &nbsp; // 2. 点击'全不选': 所有爱好都不勾选 &nbsp; &nbsp; $('#checkedNoBtn').click(function () { &nbsp; &nbsp; &nbsp; $Items.prop('checked', false) &nbsp; &nbsp; &nbsp; $checkedAllBox.prop('checked', false) &nbsp; &nbsp; }) &nbsp; &nbsp; // 3. 点击'反选': 改变所有爱好的勾选状态 &nbsp; &nbsp; $('#checkedRevBtn').click(function () { &nbsp; &nbsp; &nbsp; $Items.each(function () { &nbsp; &nbsp; &nbsp; &nbsp; this.checked = !this.checked &nbsp; &nbsp; &nbsp; }) &nbsp; &nbsp; &nbsp; $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0) &nbsp; &nbsp; }) &nbsp; &nbsp; // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中 &nbsp; &nbsp; $checkedAllBox.click(function () { &nbsp; &nbsp; &nbsp; $Items.prop('checked', this.checked) &nbsp; &nbsp; }) &nbsp; &nbsp; // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态 &nbsp; &nbsp; $Items.click(function () { &nbsp; &nbsp; &nbsp; $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0) &nbsp; &nbsp; }) &nbsp; &nbsp; // 6. 点击'提交': 提示所有勾选的爱好 &nbsp; &nbsp; $('#sendBtn').click(function () { &nbsp; &nbsp; &nbsp; $Items.filter(':checked').each(function () { &nbsp; &nbsp; &nbsp; &nbsp; alert(this.value) &nbsp; &nbsp; &nbsp; }) &nbsp; &nbsp; }) &nbsp; }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 3][]

# 五、添加删除记录 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &nbsp; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &nbsp; &lt;title&gt;添加删除记录&lt;/title&gt; &nbsp; &lt;link rel="stylesheet" type="text/css" href="css.css"/&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="employeeTable"&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;th&gt;Name&lt;/th&gt; &nbsp; &nbsp; &lt;th&gt;Email&lt;/th&gt; &nbsp; &nbsp; &lt;th&gt;Salary&lt;/th&gt; &nbsp; &nbsp; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Tom&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;tom@tom.com&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;5000&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="deleteEmp?id=001"&gt;Delete&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Jerry&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;jerry@sohu.com&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;8000&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="deleteEmp?id=002"&gt;Delete&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &lt;td&gt;Bob&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;bob@tom.com&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;10000&lt;/td&gt; &nbsp; &nbsp; &lt;td&gt;&lt;a href="deleteEmp?id=003"&gt;Delete&lt;/a&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &lt;/table&gt; &lt;div id="formDiv"&gt; &nbsp; &lt;h4&gt;添加新员工&lt;/h4&gt; &nbsp; &lt;table&gt; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &lt;td class="word"&gt;name:&lt;/td&gt; &nbsp; &nbsp; &nbsp; &lt;td class="inp"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="empName" id="empName"/&gt; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &lt;td class="word"&gt;email:&lt;/td&gt; &nbsp; &nbsp; &nbsp; &lt;td class="inp"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="email" id="email"/&gt; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &lt;td class="word"&gt;salary:&lt;/td&gt; &nbsp; &nbsp; &nbsp; &lt;td class="inp"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="salary" id="salary"/&gt; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &lt;td colspan="2" align="center"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button id="addEmpButton" value="abc"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Submit &nbsp; &nbsp; &nbsp; &nbsp; &lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;/td&gt; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &lt;/table&gt; &lt;/div&gt; &lt;script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; &nbsp; /* &nbsp; &nbsp;功能说明: &nbsp; &nbsp;1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息 &nbsp; &nbsp;2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息 &nbsp; &nbsp;技术要点: &nbsp; &nbsp;1. DOM查询 &nbsp; &nbsp;2. 绑定事件监听 &nbsp; &nbsp;3. DOM增删改 &nbsp; &nbsp;4. 取消事件的默认行为 &nbsp; &nbsp;*/ &nbsp; $(function () { &nbsp; &nbsp; $('#addEmpButton').click(function () { &nbsp; &nbsp; &nbsp; var $empName = $('#empName') &nbsp; &nbsp; &nbsp; var $email = $('#email') &nbsp; &nbsp; &nbsp; var $salary = $('#salary') &nbsp; &nbsp; &nbsp; var empName = $empName.val() &nbsp; &nbsp; &nbsp; var email = $empName.val() &nbsp; &nbsp; &nbsp; var salary = $empName.val() &nbsp; &nbsp; &nbsp; var id = Date.now() &nbsp; &nbsp; &nbsp; /* &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;Bob&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;bob@tom.com&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;10000&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;&lt;a href="deleteEmp?id=003"&gt;Delete&lt;/a&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp;*/ &nbsp; &nbsp; &nbsp; $('&lt;tr&gt;&lt;/tr&gt;') &nbsp; &nbsp; &nbsp; &nbsp; .append('&lt;td&gt;'+empName+'&lt;/td&gt;') &nbsp; &nbsp; &nbsp; &nbsp; .append('&lt;td&gt;'+email+'&lt;/td&gt;') &nbsp; &nbsp; &nbsp; &nbsp; .append('&lt;td&gt;'+salary+'&lt;/td&gt;') &nbsp; &nbsp; &nbsp; &nbsp; .append('&lt;td&gt;&lt;a href="deleteEmp?id="'+id+'&gt;Delete&lt;/a&gt;&lt;/td&gt;') &nbsp; &nbsp; &nbsp; &nbsp; .appendTo('#employeeTable') &nbsp; &nbsp; &nbsp; &nbsp; .find('a') &nbsp; &nbsp; &nbsp; &nbsp; .click(clickA) &nbsp; &nbsp; &nbsp; $empName.val('') &nbsp; &nbsp; &nbsp; $email.val('') &nbsp; &nbsp; &nbsp; $salary.val('') &nbsp; &nbsp; }) &nbsp; &nbsp; $('a').click(clickA) &nbsp; &nbsp; function clickA (event) { &nbsp; &nbsp; &nbsp; event.preventDefault() &nbsp; &nbsp; &nbsp; var $tr = $(this).parent().parent() &nbsp; &nbsp; &nbsp; var name = $tr.children('td:first').html() &nbsp; &nbsp; &nbsp; if(confirm('确定删除'+name+'吗?')) { &nbsp; &nbsp; &nbsp; &nbsp; $tr.remove() &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; } &nbsp; }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

![70 4][]

# 六、焦点轮播图 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp; &lt;meta charset="UTF-8"&gt; &nbsp; &lt;title&gt;焦点轮播图&lt;/title&gt; &nbsp; &lt;style type="text/css"&gt; &nbsp; &nbsp; /*去除内边距,没有链接下划线*/ &nbsp; &nbsp; * { &nbsp; &nbsp; &nbsp; margin: 0; &nbsp; &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; &nbsp; text-decoration: none; &nbsp; &nbsp; } &nbsp; &nbsp; /*让&lt;body有20px的内边距*/ &nbsp; &nbsp; body { &nbsp; &nbsp; &nbsp; padding: 20px; &nbsp; &nbsp; } &nbsp; &nbsp; /*最外围的div*/ &nbsp; &nbsp; #container { &nbsp; &nbsp; &nbsp; width: 600px; &nbsp; &nbsp; &nbsp; height: 400px; &nbsp; &nbsp; &nbsp; overflow: hidden; &nbsp; &nbsp; &nbsp; position: relative; /*相对定位*/ &nbsp; &nbsp; &nbsp; margin: 0 auto; &nbsp; &nbsp; } &nbsp; &nbsp; /*包含所有图片的&lt;div&gt;*/ &nbsp; &nbsp; #list { &nbsp; &nbsp; &nbsp; width: 4200px; /*7张图片的宽: 7*600 */ &nbsp; &nbsp; &nbsp; height: 400px; &nbsp; &nbsp; &nbsp; position: absolute; /*绝对定位*/ &nbsp; &nbsp; &nbsp; z-index: 1; &nbsp; &nbsp; } &nbsp; &nbsp; /*所有的图片&lt;img&gt;*/ &nbsp; &nbsp; #list img { &nbsp; &nbsp; &nbsp; float: left; /*浮在左侧*/ &nbsp; &nbsp; } &nbsp; &nbsp; /*包含所有圆点按钮的&lt;div&gt;*/ &nbsp; &nbsp; #pointsDiv { &nbsp; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; &nbsp; height: 10px; &nbsp; &nbsp; &nbsp; width: 100px; &nbsp; &nbsp; &nbsp; z-index: 2; &nbsp; &nbsp; &nbsp; bottom: 20px; &nbsp; &nbsp; &nbsp; left: 250px; &nbsp; &nbsp; } &nbsp; &nbsp; /*所有的圆点&lt;span&gt;*/ &nbsp; &nbsp; #pointsDiv span { &nbsp; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; &nbsp; float: left; &nbsp; &nbsp; &nbsp; border: 1px solid #fff; &nbsp; &nbsp; &nbsp; width: 10px; &nbsp; &nbsp; &nbsp; height: 10px; &nbsp; &nbsp; &nbsp; border-radius: 50%; &nbsp; &nbsp; &nbsp; background: #333; &nbsp; &nbsp; &nbsp; margin-right: 5px; &nbsp; &nbsp; } &nbsp; &nbsp; /*第一个&lt;span&gt;*/ &nbsp; &nbsp; #pointsDiv .on { &nbsp; &nbsp; &nbsp; background: orangered; &nbsp; &nbsp; } &nbsp; &nbsp; /*切换图标&lt;a&gt;*/ &nbsp; &nbsp; .arrow { &nbsp; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; &nbsp; display: none; &nbsp; &nbsp; &nbsp; line-height: 39px; &nbsp; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; &nbsp; font-size: 36px; &nbsp; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; &nbsp; width: 40px; &nbsp; &nbsp; &nbsp; height: 40px; &nbsp; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; &nbsp; z-index: 2; &nbsp; &nbsp; &nbsp; top: 180px; &nbsp; &nbsp; &nbsp; background-color: RGBA(0, 0, 0, 0.3); &nbsp; &nbsp; &nbsp; color: #fff; &nbsp; &nbsp; } &nbsp; &nbsp; /*鼠标移到切换图标上时*/ &nbsp; &nbsp; .arrow:hover { &nbsp; &nbsp; &nbsp; background-color: RGBA(0, 0, 0, 0.7); &nbsp; &nbsp; } &nbsp; &nbsp; /*鼠标移到整个div区域时*/ &nbsp; &nbsp; #container:hover .arrow { &nbsp; &nbsp; &nbsp; display: block; /*显示*/ &nbsp; &nbsp; } &nbsp; &nbsp; /*上一个切换图标的左外边距*/ &nbsp; &nbsp; #prev { &nbsp; &nbsp; &nbsp; left: 20px; &nbsp; &nbsp; } &nbsp; &nbsp; /*下一个切换图标的右外边距*/ &nbsp; &nbsp; #next { &nbsp; &nbsp; &nbsp; right: 20px; &nbsp; &nbsp; } &nbsp; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &nbsp; &lt;div id="list" style="left: -600px;"&gt; &nbsp; &nbsp; &lt;img src="img/5.jpg" alt="5"/&gt; &nbsp; &nbsp; &lt;img src="img/1.jpg" alt="1"/&gt; &nbsp; &nbsp; &lt;img src="img/2.jpg" alt="2"/&gt; &nbsp; &nbsp; &lt;img src="img/3.jpg" alt="3"/&gt; &nbsp; &nbsp; &lt;img src="img/4.jpg" alt="4"/&gt; &nbsp; &nbsp; &lt;img src="img/5.jpg" alt="5"/&gt; &nbsp; &nbsp; &lt;img src="img/1.jpg" alt="1"/&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;div id="pointsDiv"&gt; &nbsp; &nbsp; &lt;span index="1" class="on"&gt;&lt;/span&gt; &nbsp; &nbsp; &lt;span index="2"&gt;&lt;/span&gt; &nbsp; &nbsp; &lt;span index="3"&gt;&lt;/span&gt; &nbsp; &nbsp; &lt;span index="4"&gt;&lt;/span&gt; &nbsp; &nbsp; &lt;span index="5"&gt;&lt;/span&gt; &nbsp; &lt;/div&gt; &nbsp; &lt;a href="javascript:;" id="prev" class="arrow"&gt;&amp;lt;&lt;/a&gt; &nbsp; &lt;a href="javascript:;" id="next" class="arrow"&gt;&amp;gt;&lt;/a&gt; &lt;/div&gt; &lt;script src="./js/jquery.1.10.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 5][]

[70]: /images/20220514/956a045930674e0f87720bb53569576f.png
[70 1]: /images/20220514/72fcd295055d4ce685e901c3cea4dd92.png
[70 2]: /images/20220514/32f4b325025848ee9e069816fcc32d21.png
[70 3]: /images/20220514/3d0620863cb44a6099c95e5724eb479f.png
[70 4]: /images/20220514/3b5e54e465034a98bb605cf7f3c7b1d5.png
[70 5]: /images/20220514/f327941ce25d4f2fa4619c60f069cfe8.png