`
longzhun
  • 浏览: 370317 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

跟我学JQuery---------------第二课

阅读更多

今天是第二课,本节课也是用一个实例来讲解知识

另外说个题外话,跟我学JQuery前面几节课都是基础篇,后面的课程会深入研究,希望大家多多关注

 

 

今天的课程案例:可以编辑的表格

 

目录结构和第一课是一样的,后面的课程目录结构也都一样

 

EditTable.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实例2:可以编辑的表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/editTable.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/editTable.js"></script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th colspan="2">鼠标点击表格项就可以编辑</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>学号</th>
					<th>姓名</th>
				</tr>
				<tr>
					<td>000001</td>
					<td>张三</td>
				</tr>
				<tr>
					<td>000002</td>
					<td>李四</td>
				</tr>
				<tr>
					<td>000003</td>
					<td>王五</td>
				</tr>
				<tr>
					<td>000004</td>
					<td>赵六</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

 

 

editTable.css

 

table {
	border: 1px solid black;
	border-collapse: collapse;
	width: 400px;
}
table td {
	border: 1px solid black;
	width: 50%;
}
table th {
	border: 1px solid black;
	width: 50%;
}
tbody th {
	background-color: #A3BAE9;  
}

 

 

 

editTable.js

 

//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//	
//});
//简化的ready写法
$(function(){
	//找到表格的内容区域中所有的奇数行
	//使用even是为了把通过tbody tr返回的所有tr元素中,在数组里面下标是偶数的元素返回,因为这些元素,实际上才是我们期望的tbody里面的奇数行
	$("tbody tr:even").css("background-color","#ECE9D8");

	//我们需要找到所有的学号单元格
	var numTd = $("tbody td:even");
	//给这些单元格注册鼠标点击的事件
	numTd.click(function() {	
		//找到当前鼠标点击的td,this对应的就是响应了click的那个td
		var tdObj = $(this);
		if (tdObj.children("input").length > 0) {
			//当前td中input,不执行click处理
			return false;
		}
		var text = tdObj.html(); 
		//清空td中的内容
		tdObj.html("");
		//创建一个文本框
		//去掉文本框的边框
		//设置文本框中的文字字体大小是16px
		//使文本框的宽度和td的宽度相同
		//设置文本框的背景色
		//需要将当前td中的内容放到文本框中
		//将文本框插入到td中
		var inputObj = $("<input type='text'>").css("border-width","0")
			.css("font-size","16px").width(tdObj.width())
			.css("background-color",tdObj.css("background-color"))
			.val(text).appendTo(tdObj);
		//是文本框插入之后就被选中
		inputObj.trigger("focus").trigger("select");
		inputObj.click(function() {
			return false;
		});
		//处理文本框上回车和esc按键的操作
		inputObj.keyup(function(event){
			//获取当前按下键盘的键值
			var keycode = event.which;
			//处理回车的情况
			if (keycode == 13) {
				//获取当当前文本框中的内容
				var inputtext = $(this).val();
				//将td的内容修改成文本框中的内容
				tdObj.html(inputtext);
			}
			//处理esc的情况
			if (keycode == 27) {
				//将td中的内容还原成text
				tdObj.html(text);
			}
		});
		inputObj.blur(function(){
			var inputtext = $(this).val();
			//将td的内容修改成文本框中的内容
			tdObj.html(inputtext);
		});
	});
});

 

 

效果图:



 总结:

1。table中可以包含thead和tbody

2。可以通过border-collapse: collapse这种方式来使表格中的单元格的边框合并

3。$(function(){})是$(document).ready(function(){})的简化写法

3。.$(“tbody tr”)可以返回tbody中的所有tr节点

4。.$(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点

5。function中的this代表执行这个function的对象

6。$()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象

7。children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容

8。.如果选择器返回的JQuery对象中包含多个DOM节点,在这个对象上注册类似click这样的事件时,所有DOM节点都会用于事件

9。JQuery的对象内容包含着选择器对应的DOM节点,以数组形式保存

10。get方法可以获得JQuery对象中包含的某一个DOM节点

11。.html方法可以设置或获取节点的HTML内容

12。$()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成JQuery对象

11。JQuery大部分方法都会返回执行这个方法的JQuery对象,因此可以采用链式方法的写法来编写给予JQuery的代码。

12。width方法可以设置或获取某个节点的宽度

13。.appendTo方法可以将一个节点追加到另一个节点所有子节点的后面

14。trigger方法可以触发某个javascript的事件发生

15。JQuery中某个事件方法的参数function上可以定义一个event的参数,JQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象

16。JQuery的event对象上有一个which的属性可以获得键盘按键的键值

17。13表示回车键,27表示ESC键

  • 大小: 8.1 KB
分享到:
评论

相关推荐

    原生js图片圆形排列按钮控制3D旋转切换插件.zip

    原生js图片圆形排列按钮控制3D旋转切换插件.zip

    类似c++数组的python包

    内含二维数组与三维数组,分别为list2nd,list3rd

    原生js颜色随机生成9x9乘法表代码.zip

    原生js颜色随机生成9x9乘法表代码.zip

    原生js实现图片叠加滚动切换代码.zip

    原生js实现图片叠加滚动切换代码.zip

    【Academic tailor】学术小裁缝必备知识点:全局注意力机制(GAM)TensorFlow

    【Academic tailor】学术小裁缝必备知识点:全局注意力机制(GAM) 注意力机制是深度学习中的重要技术,尤其在序列到序列(sequence-to-sequence)任务中广泛应用,例如机器翻译、文本摘要和问答系统等。这一机制由 Bahdanau 等人在其论文《Neural Machine Translation by Jointly Learning to Align and Translate》中首次提出。以下将详细介绍这一机制的背景、核心原理及相关公式。 全局注意力机制(Global Attention Mechanism, GAM)由 《Global Attention Mechanism: Retain Information to Enhance Channel-Spatial Interactions》提出,是一篇针对计算机视觉任务提出的方法。这篇文章聚焦于增强深度神经网络中通道和空间维度之间的交互,以提高分类任务的性能。与最早由 Bahdanau 等人提出的用于序列到序列任务的注意力机制 不同,这篇文章的重点是针对图像分类任务,并未专注于序

    基于SpringBoot的“篮球论坛系统”的设计与实现(源码+数据库+文档+PPT).zip

    本项目在开发和设计过程中涉及到原理和技术有: B/S、java技术和MySQL数据库等;此文将按以下章节进行开发设计; 第一章绪论;剖析项目背景,说明研究的内容。 第二章开发技术;系统主要使用了java技术, b/s模式和myspl数据库,并对此做了介绍。 第三章系统分析;包罗了系统总体结构、对系统的性能、功能、流程图进行了分析。 第四章系统设计;对软件功能模块和数据库进行详细设计。 第五章系统总体设计;对系统管理员和用户的功能进行描述, 第六章对系统进行测试, 第七章总结心得;在论文最后结束章节总结了开发这个系统和撰写论文时候自己的总结、感想,包括致谢。

    毕业设计&课设_iOS 商城项目,含购物与商家管理功能,用 Sqlite,有账号示例,适合 iOS 开发练习.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    镗夹具总工艺图.dwg

    镗夹具总工艺图

    原生js树叶数字时钟代码.rar

    原生js树叶数字时钟代码.rar

    近代非线性回归分析-韦博成1989

    近代非线性回归分析-韦博成1989

    Rust语言中冒泡排序算法的高效实现与优化

    内容概要:本文详细介绍了用 Rust 语言实现冒泡排序算法的具体步骤,以及通过设置标志位来优化算法性能的方法。示例代码包括了函数定义、内外层循环逻辑、标志位的应用,并在主函数中展示了如何调用 bubble_sort 函数并显示排序前后的数组。 适合人群:具有基本 Rust 编程基础的学习者和开发者。 使用场景及目标:适用于想要深入了解 Rust 中冒泡排序实现方式及其优化技巧的技术人员。通过本篇文章,能够掌握 Rust 基本语法以及算法优化的基本思想。 阅读建议:除了仔细阅读和理解每一部分的内容外,还可以尝试修改代码,改变数据集大小,进一步探索冒泡排序的时间复杂度和优化效果。此外,在实际应用时也可以考虑引入并发或其他高级特性以提升性能。

    培训课件 -安全隐患分类与排查治理.pptx

    培训课件 -安全隐患分类与排查治理.pptx

    1-中国各地级市的海拔标准差-社科数据.zip

    中国各地级市的海拔标准差数据集提供了298个地级市的海拔变异性信息。海拔标准差是衡量某地区海拔高度分布离散程度的统计指标,它通过计算各测量点海拔与平均海拔之间的差异来得出。这一数据对于评估地形起伏对网络基础设施建设的影响尤为重要,因为地形的起伏度不仅会增加建设成本,还会影响信号质量。此外,由于地形起伏度是自然地理变量,它与经济社会因素关联性较小,因此被用作“宽带中国”试点政策的工具变量,以研究网络基础设施建设对经济的影响。数据集中包含了行政区划代码、地区、所属省份、所属地域、长江经济带、经度、纬度以及海拔标准差等关键指标。这些数据来源于地理空间数据云,并以Excel和dta格式提供,方便研究者进行进一步的分析和研究。

    YOLO算法的原理与实现.pdf

    YOLO算法的原理与实现

    机器学习用于视网膜病变预测:使用 XGBoost 揭示年龄和HbA1c 的重要性 -论文

    视网膜病变是糖尿病和高血压的主要微血管并发症。如果不及时治疗,可能会导致失明。据估计,印度三分之一的成年人患有糖尿病或高血压,他们未来患视网膜病变的风险很高。我们研究的目的是检查糖化血红蛋白 (HbA1c)、血压 (BP) 读数和脂质水平与视网膜病变的相关性。我们的主要假设是,血糖控制不佳(表现为高 HbA1c 水平、高血压和异常脂质水平)会导致视网膜病变风险增加。我们使用眼底照相机筛查了 119 名印度患者的视网膜病变,并获取了他们最近的血压、HbA1c 和血脂谱值。然后,我们应用 XGBoost 机器学习算法根据他们的实验室值预测是否存在视网膜病变。我们能够根据这些关键生物标志物高精度地预测视网膜病变。此外,使用 Shapely Additive Explanations (SHAP),我们确定了对模型最重要的两个特征,即年龄和 HbA1c。这表明血糖控制不佳的老年患者更有可能出现视网膜病变。因此,这些高风险人群可以成为早期筛查和干预计划的目标,以防止视网膜病变发展为失明。

    RL Base强化学习:信赖域策略优化(TRPO)算法TensorFlow实现

    在强化学习(RL)领域,如何稳定地优化策略是一个核心挑战。2015 年,由 John Schulman 等人提出的信赖域策略优化(Trust Region Policy Optimization, TRPO)算法为这一问题提供了优雅的解决方案。TRPO 通过限制策略更新的幅度,避免了策略更新过大导致的不稳定问题,是强化学习中经典的策略优化方法之一。

    Spring 应用编译为原生可执行文件.zip

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。

    1-中国各地区普通小学毕业生数(1999-2020年)-社科数据.zip

    这组数据涵盖了1999至2020年间中国各地区普通小学毕业生的数量。它为我们提供了一个深入了解中国教育领域中普通小学阶段教育水平和教育资源分配情况的窗口。通过分析这些数据,可以为制定科学合理的教育政策提供依据,同时,通过比较不同城市的普通小学毕业生数,也能为城市规划和劳动力市场调查提供参考。数据来源于中国区域统计年鉴和中国各省市统计年鉴,包含了8472个样本,以面板数据的形式呈现。这些数据对于掌握中国教育态势具有重要的参考价值。

    原生js制作拖拽排列排序代码.zip

    原生js制作拖拽排列排序代码.zip

    PixPin截图工具,非常好用的一款截图工具

    PixPin截图工具,非常好用的一款截图工具

Global site tag (gtag.js) - Google Analytics