实例——可编辑的表格

最新推荐文章于 2024-04-27 09:46:42 发布

小左

最新推荐文章于 2024-04-27 09:46:42 发布

阅读量1.1k

点赞数

分类专栏： B/S

本文链接：https://blog.csdn.net/zuozuo1245/article/details/17270201

版权

B/S 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在牛腩讲的视频中了解到如何制作可编辑的表格，可当时对CSS、javascript和jquery就迷迷糊糊，最后就记得了实现了可编辑表格这个功能了。现在看jquery时又看到了，而且对CSS、javascript也有了一定的认识，理解起来要容易多了。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery实例，可以编辑的表格</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>
	<table>
    	<thead>
        	<tr>
            	<th>鼠标点击表格可以编辑</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>00001</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>00002</td>
                <td>李四</td>
            </tr>
            <tr>
                <td>00003</td>
                <td>王五</td>
            </tr>
            <tr>
                <td>00004</td>
                <td>赵六</td>
            </tr>
        </tbody>
    </table>
<body>
</body>
</html>

CSS代码

table{
	border:1px solid black;
	/* 修正单元格之间的边框不能合并 */
	border-collapse:collapse;
	width:400px;
}
table td{
	border:1px solid black;
	width:50%;
}
tbody th{
	border:1px solid black;
	widows:50%;
}
thead th{
	vertical-align:middle;
}
tbody th{
	background-color:#A3BAE9;
}

JS代码

$(function(){
	//找到表格的内容区域中所以的奇数行，标注
	$("tbody tr:even").css("background-color","#ECE9D8");
	//找到所有的学号单元格
	var numId=$("tbody td:even");
	//给这些单元格注册鼠标点击事件
	numId.click(function(){

		//找到当前鼠标点击的td
		var tdObj=$(this);
		
		//如果当前的td中有文本框，就不执行单机事件
		if (tdObj.children("input").length > 0){
			return false;
		}
		var text=tdObj.html();
		//清空td中的内容
		tdObj.html("");
		
		//创建一个文本框
		//使文本框的宽度和td的宽度相同
		//去掉文本框的边框
		//设置文本框中的文字字体大小事16px
		//设置文本框的背景色
		//需要将当前td中的内容放到文本框中
		//将文本框插入到td中
		var inputObj=$("<input type='text'>").width(tdObj.width())
		.css("border-width","0").css("font-size","16px").css("background-color",tdObj.css("background-color")).val(text)
		.appendTo(tdObj);
		
		//使文本框插入之后就被选中
		//inputObj.get(0).select();
		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);
			}
		})

	});
});

最后效果：

知识点小结：

1、$(document).ready(function() {});和$(function(){}达到同样的效果，就是需要在页面装载完成是注册上这些工作。

2、jquery通过选择器能获取任意一个DOM节点，也能获取一组节点，以数组形式保存。

3、如果选择器返回的jquery对象中包含对个DOM节点，在这个对象上注册类似click这样的事件时，所以节点都会用于事件，因为实现$方法中有each方法，each方法可以注册该function的每一个元素执行。

4、appendTo方法可以将一个节点追加到另外一个节点所以子节点的后面。

5、$可以干四件事情：

a.可以在里面直接放function，function里面的内容就是页面装载完后执行的内容。

b.如果写CSS的选择器，会帮我们找到一些CSS节点，包装成jquery对象。

c.放DOM对象，会转换为jquery对象。

d.如果是正确的HTML文本，就创建一个DOM节点，并包装为jquery对象。

小左

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
36
评论
实例——可编辑的表格

在牛腩讲的视频中了解到如何制作可编辑的表格，可当时对CSS、javascript和jquery就迷迷糊糊，最后就记得了实现了可编辑表格这个功能了。现在看jquery时又看到了，而且对CSS、javascript也有了一定的认识，理解起来要容易多了。HTML代码JQuery实例，可以编辑的表格鼠标点击表格可以
复制链接

扫一扫