可编辑的表格
<!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=gb2312" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(function(){
/*斑马条*/
$("tbody tr:even").css("background-color","#99c");
/*选中td*/
$("tbody td").click(function(){
var numTd= $(this);
if(numTd.children("input").length > 0){
//表示里面有子元素input，不处理click事件
return false;
}
var text = numTd.html();//讲内容保存
/*td的内容清空*/
numTd.html("");
/*选中一个td,加入input*/
/*去掉边框，宽度设置为td的宽度，背景色设置为td的背景色,input的内容为td的内容，设置字体大小，原本的比较小*/
var inputObj= $("<input type='text' />");
inputObj.appendTo(numTd).css("border","1").width(numTd.width()).css("background-color",numTd.css("background-color")).val(text).css('font-size','16px');
/*选中文本框*/
inputObj.trigger("focus").trigger("select");//跨浏览器 ，原本可以用inputObj.select()选中
/*取消文本框点击事件*/
/*第二次点击的时候，其实是点击input里面。input此时在td里，因此td也会点击一次，而触发下面的事件。所以使用false来阻止点击事件蔓延*/
$(inputObj).click(function(){
return false;
})
/*保存inputObj输入的内容*/
$(inputObj).keydown(function(e){
//获取当期的键值
var keycode = e.which;
if(keycode ==13){
//13表示回车，e表示事件,把内容保留
numTd.html($(this).val());
}
if(keycode == 27){
numTd.html(text);//内容还原
}
})
/*边框问题*/
})
})
$(function(){
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
})
</script>
<style type="text/css">
table{
border:1px solid black;
width:400px;
border-collapse:collapse;
}
table td{
border:1px solid black;
width:200px;
}
table th{
border:1px solid black;
}
tbody th{
background:#3333FF;
}
</style>
<title>无标题文档</title>
</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>
分享到：
相关推荐
在IT领域，"可编辑表格"是一个非常实用的功能，它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel，还是在线协作工具如Google Sheets，这种功能都为用户提供了极大的便利。下面我们将...
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
在IT行业中，尤其是在网页开发领域，可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案，允许用户直接在网页上对表格数据进行编辑，极大地提升了交互性和用户体验。下面我们将...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格，它允许用户在表格内直接编辑数据，无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作（创建、读取、更新、删除）非常实用，尤其适用于后台...
在MATLAB开发中，TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据，进行编辑、查看和分析，极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中，开发者利用JavaScript的灵活性和强大的功能，创建了一个用户可以直接...
**jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计，为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据，提高了交互性和用户体验。下面将...
基于vue的可编辑表格 很多时候我们需要直接编辑表格内容，这个组件刚好解决了需求
EXT 可编辑 表格的例子 EXT 可编辑 表格的例子
在Vue项目中，当面临需要实现可编辑表格的需求时，开发者通常会遇到性能问题，特别是在数据量较大的情况下。本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格，以解决类似的问题。 首先，`vxe-table...
在提供的压缩包文件"VC2010-08-25-VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案"中，很可能包含了具体的代码示例和解决这些问题的方法。通过学习这些示例，开发者可以更好地理解和掌握如何在VC...
总结，实现一个可编辑表格（表单）需要结合HTML、CSS、JavaScript以及可能的前端框架，与后端配合完成数据的提交和处理。通过这样的方式，我们可以创建出一个功能完备、用户体验良好的网页表单系统。
这个资源，"在线编辑表格 html格式可编辑表格 javascript编写"，提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言，常用于增强网页的动态功能，而HTML则是网页内容的基础...
在本文中，我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构...
【标题】"WebTableSetup(jsp网页可编辑表格)"是一个涉及到网页开发技术的主题，主要聚焦在如何在JSP（JavaServer Pages）环境中创建一个可编辑的表格。JSP是一种动态网页技术，允许开发者将Java代码嵌入到HTML页面中...