jquery创建可编辑的动态表格

最新推荐文章于 2023-04-05 23:35:28 发布

每天二两茅台

最新推荐文章于 2023-04-05 23:35:28 发布

阅读量1.1k

点赞数

文章标签： jquery function stylesheet border input html

本文链接：https://blog.csdn.net/chj225500/article/details/7061416

版权

1.JS文件

//创建可编辑的表格
$(document).ready(function(){
	$("tbody tr:even").css("background-color","#FAE9F3");
	//找到所有的学号单元格
	var numID=$("tbody td:even");
	//给这些单元格注册鼠标点击事件
	numID.click(function (){
	  //找到鼠标点击的td this鼠标响应了click的ID
	  var tdobj=$(this);
	  //查询td里是否有文本框
	  if(tdobj.children("input").length>0)
		{
			return false;
		}
	  var text=tdobj.html();
	  //清空td中的内容
	  tdobj.html("");
	 //创建一个文本框
	  var inputobj=$("<input type='text'/>").css("border","0")
	  .width(tdobj.width())
	  .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){
	   //处理Enter键的情况
	  	//获取当前的按键键值
	  	var keyCode=event.witch;
	  	if(keyCode == 13)
	  	{
	  		//获取当前文本框中的内容
	  		var inputText=$(this).val();
	  		//将td的内容修改成文本框的内容
	  		tdobj.val(inputText);
	  	}
	  	//处理esc的情况
	  	if(keyCode == 27)
	  	{
	  		tdobj.html(text);
	  	}
	  });
	  
	  //去掉文本框的边框
	  //inputobj.css("border","0");
	  
	  //使文本框的宽度td的宽度一致
	  //inputobj.width(tdobj.width());
	  //将当前td中的内容放入文本框中
	  //inputobj.val(tdobj.html());
	  //设置文本框的背景色 取当前td的背景色
	  //inputobj.css("background-color",tdobj.css("background-color"));
	 //插入一个文本框
	});
});

2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>可编辑的表格</title>
<link href="css/bj.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bj.js"></script>
</head>
<body>
  <table>
     <thead>
     	<tr>
     	   <th colspan="2">鼠标点击表格就可以编辑</th>
     	</tr>
     </thead>
     <tbody>
        <tr>
          <th>学号</th>
          <th>姓名</th>
        </tr>
        <tr>
          <td>0001</td>
          <td>张三</td>
        </tr>
        <tr>
          <td>0002</td>
          <td>李四</td>
        </tr>
        <tr>
          <td>0003</td>
          <td>雨晨</td>
        </tr>
        <tr>
          <td>0004</td>
          <td>罗罗</td>
        </tr>
     </tbody>
  </table>
</body>
</html>

每天二两茅台

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery创建可编辑的动态表格

1.JS文件//创建可编辑的表格$(document).ready(function(){ $("tbody tr:even").css("background-color","#FAE9F3"); //找到所有的学号单元格 var numID=$("tbody td:even"); //给这些单元格注册鼠标点击事件 numID.click(function (){
复制链接

扫一扫