jquery学习之可编辑的单元格

最新推荐文章于 2021-04-13 04:53:43 发布

testzhq426

最新推荐文章于 2021-04-13 04:53:43 发布

阅读量95

点赞数

分类专栏： web 文章标签： jQuery CSS JavaScript HTML Cache ViewUI

本文链接：https://blog.csdn.net/testzhq426/article/details/83520767

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第一千零三十六章考验

html代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jquery-EditTable.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" type="text/css" 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>123</td>
    			<td>张三</td>
    		</tr>
    		<tr>
    			<td>456</td>
    			<td>李四</td>
    		</tr>
    		<tr>
    			<td>456</td>
    			<td>王五</td>
    		</tr>
    		<tr>
    			<td>456</td>
    			<td>赵六</td>
    		</tr>
    	</tbody>
    </table>
  </body>
</html>

$(function(){
	$("tbody tr:even").css("background-color","#369456");
	
	var numTd=$("tbody td:even");
	numTd.click(function(){
		var tdObj=$(this);
		if(tdObj.children("input").length>0){
			return false;
		}
		var text=tdObj.html();
		var inputObj=$("<input type='text' />");
		inputObj.css("border-width","0");
		inputObj.css("font-size","16px");
		
		inputObj.width(tdObj.width());
		inputObj.val(tdObj.html());
		inputObj.css("background-color",tdObj.css("background-color"));
		tdObj.html("");
		inputObj.appendTo(tdObj);
		//inputObj.get(0).select();
		inputObj.trigger("focus").trigger("select");
		inputObj.click(function(){
			return false;
		});
		inputObj.keyup(function(event){
			var keycode=event.which;
			if(keycode==13){
				var inputValue=$(this).val();
				tdObj.html(inputValue);
			}
			if(keycode==27){
				tdObj.html(text);
			}
		});
	});
});

CSS代码

@CHARSET "UTF-8";

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:#EbbbbE;
}

testzhq426

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery学习之可编辑的单元格

第一千零三十六章考验html代码 &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &
复制链接

扫一扫