用 jQuery编写的可编辑的表格
1、 思路
首先实现隔行换色的效果
当点击想要修改的列时，创建文本框
当点击 enter时提交数据，当点击esc返回的键时，取消输入的内容
2．代码解析
Html代码 ：
<body>
<div align="center">
<h1>
显示员工界面
</h1>
<table>
<thead>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td>序号 </td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>出生日期</td>
<td>薪资</td>
<td>部门</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td >1</td>
<td>老王</td>
<td>女</td>
<td>23</td>
<td>5435343</td>
<td>10000</td>
<td>河软</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td>1</td>
<td>老王</td>
<td>女</td>
<td>23</td>
<td>5435343</td>
<td>10000</td>
<td>河软</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td>1</td>
<td>老王</td>
<td>女</td>
<td>23</td>
<td>5435343</td>
<td>10000</td>
<td>河软</td>
</tr>
</tbody>
</table>
</div>
</body>
Js代码为:
$(document).ready(function(){
//实现隔行变色的效果
//首先获取tbody中的所有的tr，然后采用：even选择出奇数行的所有的特点，但是返回的是偶数行
$("tbody>tr:even").css("background-color","pink");
///功能一样，是偶数行，实际是奇数行
$("tbody>tr:odd").css("background-color","blue");
//当点击tbody中的td时，能够把td中的内容替换成一个text框，进行修改
//点击enter 能够提交数据 点击esc键撤销修改
//获取所有的tr,并注册事件,因为在遍历的时候序号不可编辑，所以序号这一列不能编辑
$("tbody tr").each(function(index,dom){
//通过dom得到所有的tr，判断tr中的td如果是>2的才可以编辑
$(dom).children("td:gt(1)").click(function(){
//获取td的jQuery对象
var $td = $(this);//注意得到td的jQuery的对象的时候用的是this,也就是点击哪个获取哪个，如果用的是dom,得到的是整行。
//得到文本框内容
var tdText = $td.text(); //text 取得所有匹配元素的内容。
//判断如果已经创建了input，就不在创建了，如果没有创建，在创建,是通过判断孩子节点
if($td.children("input").length>0){
return false;
}
//清空td中的文本
$td.html(""); //设置每一个匹配元素的html内容
//创建可编辑的input
var $input = $("<input type='text'/>");
$input.css("background-color",$td.css("background-color"));//设置input的框元素和td中的颜色相同
$input.css("width",$td.width());//宽度和td的宽度相同
$input.css("border-width",0);//文本框的边框为0
//在得到文本框的同时得到文本框以前的内容
$input.val(tdText); //获得第一个匹配元素的当前值。
//把创建的input放到td中
$td.append($input);
//当触发td的键盘事件的时候，如果点enter键，保存，如果点esc，取消输入的内容
$td.keyup(function(event){
//获取键盘按下的事件
var key = event.which;
//alert(key);
if (key == 13) {
$td.html($input.val());//得到文本框的值并放到td中
}else if(key==27){
$td.html(tdText);
}
});
});
});
});
3.总结
在这里我大概总结一下text(),val(),html()的区别，因为在这个例子之间，反复用到了这几个属性
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(val):设置每一个匹配元素的html内容
val():获得第一个匹配元素的当前值。
val(val): 设置每一个匹配元素的值。
text():取得所有匹配元素的内容。
text(val): 设置所有匹配元素的文本内容
分享到：
相关推荐
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
总结来说，利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性，使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery，开发者可以...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
总的来说，利用jQuery实现可编辑表格是一项实用的技能，它使开发者能够快速构建动态、交互性强的网页应用。通过结合HTML5的新特性、jQuery的强大功能以及适当的前端框架，我们可以创建出满足各种需求的可编辑表格，...
jquery可编辑表格代码实现
总之，使用jQuery实现可编辑表格是一项实用的技术，它允许用户直接在网页上修改数据，提高了交互性和数据管理的效率。通过学习和实践，你可以根据实际需求进行定制，创建出更加复杂的可编辑表格应用。
【jQuery可编辑表格】是一种网页开发技术，它利用JavaScript库jQuery的强大功能，为用户提供交互式的表格，用户不仅可以查看数据，还可以直接在表格中编辑数据。这样的功能极大地提升了用户体验，尤其适用于数据管理...
本主题将深入探讨如何使用jQuery实现一个可编辑的表格功能，允许用户即时修改表格内的数据并保存更改。 首先，我们需要一个基本的HTML结构来创建表格。表格通常由`<table>`标签定义，`<thead>`包含表头（`<th>`标签...
本实例重点在于“jQuery-可编辑表格”，这通常指的是使用jQuery来创建用户可以直接在前端编辑表格数据的功能。这种功能极大地提高了用户与网页交互的便捷性和效率，尤其是对于数据管理和展示的场景。 首先，要实现...
在网页开发中，jQuery 是一个...综上所述，利用 jQuery 实现可编辑表格涉及到 HTML 结构、jQuery 事件监听、DOM 操作以及可能的数据交互。通过结合这些技术，您可以创建出一个功能丰富的、用户友好的可编辑表格组件。
这个简单的示例展示了如何使用jQuery实现基本的可编辑表格功能。实际应用中，可能还需要考虑更多细节，比如输入验证、多列同时编辑、键盘快捷键支持等。同时，为了提供更好的用户体验，可以考虑使用插件如`jQuery...
**jQuery 可编辑表格详解** 在网页开发中，表格是一种常用的数据展示和操作方式。jQuery 是一个强大的JavaScript库，它可以简化HTML文档遍历、事件处理、动画和Ajax交互。结合jQuery，我们可以创建功能丰富的可编辑...
这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中，这种功能常用于数据输入或管理应用程序，允许用户直接在表格内修改数据而无需跳转到...
<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可编辑表格涉及HTML结构的设计、jQuery事件监听和数据处理。通过合理运用这些技术，我们可以构建出用户友好且功能强大的表格应用，方便用户在前端直接编辑和管理数据。同时，结合使用现有的...
通过以上步骤，我们可以创建一个功能完备、用户体验良好的可编辑表格。JQuery的强大功能使得这个过程变得相对简单，但要注意在实际项目中还需要考虑代码组织、模块化和测试等多方面因素，以确保代码的可维护性和稳定...