JQuery实战——可编辑的表格

一、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>


 

二、editable.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);

			}

		});

	});

});




 

三、CSS代码

    
able {

	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;  

}

 

四、总结

     1、table中可以包含thea和tbody

     2、表头的内容可以放到th中

     3、table{}这种写法称作标签选择器,可以对整个页面所有table产生影响

     4、table td{}这种写法表示的是table中包含的所有td

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

     6、当th上由背景色时,这个th属于的tr上定义的背景色会无效

     7、$(function(){})是$(document).ready(function(){})的简化写法

     8、$("tbdoy tr")可以返回tbdody中的所有tr节点

     9、$("tbody tr:even")可以返回tboby中所有索引值是偶数的tr节点

    10、css方法可以用于设定或获取节点的css属性,参数名是css的属性名

    11、JQuery的对象呢日哦那个包含着选择器对应的DOM节点,以数组形式保存

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

    13、function中的this代表执行这个function的对象

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

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

    16、html()方法可以设置或获取节点的HTML内容

    17、val方法可以获取或设置节点value值

    18、width方法可以设置获取某个节点的宽度

    19、trigger方法可以出发某个javascript的事件发生

 

 


 

你可能感兴趣的:(jquery)