<html>
<head>
<title>JQuery动态编辑的表格</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-1.4.2.js"></script>
<script language="javascript">
$(document).ready(function(){
//$("tbody td:even")得到表格左边的单元格。:even表示：匹配所有索引值为偶数的元素，从 0 开始计数
$("tbody tr:even").css("background-color","#ECE9D8");
var numId = $("tbody td:even");
//所有的得到表格左边的单元格都注册了点击事件
numId.click(function(){
var tdObj = $(this);//获得当前td单元格对象
//当前文本框里是否有input对象，children()表示：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
if(tdObj.children("input").length>0){
return false;
}
var inputObj = $("<input type='text'>");//创建文本对象封装成JQuery对象
//html()：取得第一个匹配元素的html内容
var text = tdObj.html();
inputObj.val(text);//将单元格里面的内容赋值到创建的文本对象
tdObj.html("");//将当前td单元格内容清空
inputObj.width(tdObj.width());//设置文本框对象的宽度与单元格的宽度相同
inputObj.css("border-width","0");//设置文本框的边框
inputObj.css("font-size","16px");//设置文本框字体与单元格中的字体大小一样
//设置文本框的背景色与单元格的背景色相同
inputObj.css("background-color",tdObj.css("background-color"));
inputObj.appendTo(tdObj);//将文本框追加到单元格中
//inputObj是JQuery对象,get(0)获到的就是一个DOM对象即文本框（非JQuery对象）
//inputObj.get(0).select();
//trigger()：在每一个匹配的元素上触发某类事件。先触发focus后触发select事件
inputObj.trigger("focus").trigger("select");
//文本框的单击事件
inputObj.click(function(){
return false;
});
//处理文本框上的Enter和ESC事件
inputObj.keyup(function(event){
//获得当前所按下的键盘的键值
var keyCode = event.which;
if(keyCode == 13){//Enter
var inputObjText = $(this).val();
tdObj.html(inputObjText);
tdObj.remove("input");
}else if(keyCode == 27){//Esc
tdObj.html(text);
tdObj.remove("input");
}
});
});
});
</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>
editTable.css内容如下：
table {
border:1px solid black;
/**
* border-collapse : separate | collapse
* 设置或检索表格的行和单元格的边是合并在一起(collapse没有边框)还是按照标准的HTML样式分开
**/
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;
}
分享到：
相关推荐
在本实例中，我们将深入探讨如何使用jQuery库创建一个可编辑的表格。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互。在“jquery实例3：可编辑的表格”中，我们将学习如何利用...
创建可编辑表格结构 首先，我们需要创建一个基本的HTML表格结构。表格由`<table>`标签定义，`<tr>`表示行，`<th>`表示表头，`<td>`表示数据单元格。对于可编辑表格，我们可以在`<td>`内嵌入`<input>`元素，用户...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
在实际应用中，开发者可能会遇到如何选择合适的jQuery可编辑表格插件的问题。常见的有Datatables、handsontable、grid.js等，每款都有其特色和适用场景，应根据项目需求和技术栈进行选择。 Datatables是一款功能...
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
**jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计，为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据，提高了交互性和用户体验。下面将...
总结来说，利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性，使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery，开发者可以...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
这个简单的示例展示了如何使用jQuery实现基本的可编辑表格功能。实际应用中，可能还需要考虑更多细节，比如输入验证、多列同时编辑、键盘快捷键支持等。同时，为了提供更好的用户体验，可以考虑使用插件如`jQuery...
此外，对于可编辑表格，我们还需要考虑数据验证、错误提示、格式化等功能，这些可以通过添加额外的jQuery代码来实现。例如，可以使用`change`事件来实时验证输入，并通过`addClass()`和`removeClass()`改变单元格的...
1. **实时编辑**：当用户点击表格中的某个单元格时，jQuery可以通过添加CSS类或属性改变该单元格的样式，使其变为可编辑状态。例如，可以添加一个`contenteditable`属性使单元格变为文本输入框。 2. **事件监听**：...
《jQuery+PureCSS可编辑表格插件：打造高效交互体验》 在网页开发中，数据展示和交互性是至关重要的元素。jQuery与PureCSS结合的可编辑表格插件，为开发者提供了一种高效且灵活的方式来实现这一目标。该插件通过...
在本文中，我们将深入探讨jQuery Easy UI中的`edatagrid`组件，以及如何实现动态编辑表格，特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具，它扩展了基本的`datagrid`功能，提供了更丰富的...
<title>jQuery 可编辑表格 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px;...
总的来说，这个jQuery可编辑表格代码结合了jQuery的便利性、自适应布局的灵活性和动态数据操作的实用性，为开发者提供了一个高效且易用的工具，使得构建交互性强、适应多设备的表格应用变得轻而易举。
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery...通过学习和实践，你可以根据实际需求进行定制，创建出更加复杂的可编辑表格应用。
总的来说，利用jQuery实现可编辑表格是一项实用的技能，它使开发者能够快速构建动态、交互性强的网页应用。通过结合HTML5的新特性、jQuery的强大功能以及适当的前端框架，我们可以创建出满足各种需求的可编辑表格，...