jQuery操作表格简单示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery学习 操作表格</title>
<style type="text/css">
html,body{
font-size: 13px;
}
table{
width:500px;
text-align:center;
font-size: 13px;
border-collapse:collapse;
border-color: #7c7b81;
}
.odd{
background-color: #CFD0D4;
}
.over{
background-color:#E6ECF5;
color:#F00;
}
</style>
</head>
<body>
<table id="userTable" border="1">
<thead>
<tr>
<th width="50"><input class="checkAll" type="checkbox" title="全选与反选"/></th>
<th>ID</th>
<th>用户名</th>
<th>角色</th>
<th>创建日期</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="userId" /></td>
<td>1</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td><input type="checkbox" name="userId" /></td>
<td>2</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td><input type="checkbox" name="userId" /></td>
<td>3</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td><input type="checkbox" name="userId" /></td>
<td>4</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
<tr>
<td><input type="checkbox" name="userId" /></td>
<td>5</td>
<td>admin</td>
<td>系统管理员</td>
<td>2010-09-08</td>
</tr>
</tbody>
</table>
<input id="add" type="button" value="新增"/>
<input id="del" type="button" value="删除"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
function chgColor(tableId,bgColor,hoverColor){
$("#"+tableId+" tbody tr:odd").css("background-color",bgColor);
$("#"+tableId+" tbody tr").each(function(){
var oldBgColor = $(this).css("background-color");
$(this).mouseover(function(){
$(this).css("background-color",hoverColor);
});
$(this).mouseout(function(){
$(this).css("background-color",oldBgColor);
});
});
}
$(document).ready(function(){
chgColor("userTable","#CFD0D4","#E6ECF5");
$(".checkAll").click(function(){
if( $(this).attr("checked")){
$("[name=userId]").attr("checked","true");
} else {
$("[name=userId]").each(function(){
if( $(this).attr("checked") ){
$(this).removeAttr("checked");
} else {
$(this).attr("checked","true");
}
});
}
});
$("#add").click(function(){
var user = {"id":"6",
"name":"lql",
"role":"系统管理员",
"createDate":"2010-9-10"
};
$("#userTable tbody").append("<tr><td><input type='checkbox' name='userId' /></td>"+
"<td>"+user.id+"</td>"+
"<td>"+user.name+"</td>"+
"<td>"+user.role+"</td>"+
"<td>"+user.createDate+"</td>");
chgColor("userTable","#CFD0D4","#E6ECF5");
});
$("#del").click(function(){
$("[name=userId]:checked").each(function(){
$(this).parent().parent().remove();
});
chgColor("userTable","#CFD0D4","#E6ECF5");
});
});
</script>
</body>
</html>
分享到：
相关推荐
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨...通过不断实践和学习，你将能掌握更多关于jQuery表格操作的高级技巧和最佳实践。
虽然提供的文件没有直接提及插件，但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些知识点，我们可以构建一个交互式的表格，不仅可以展示静态数据，还能响应用户操作，进行数据的动态更新和...
本实例代码“jQuery生成SKU表格实例代码”聚焦于如何使用jQuery技术来实现一个类似于淘宝商品发布的动态SKU（Stock Keeping Unit，库存量单位）表格功能。 首先，我们来理解SKU表格的核心功能。在电商系统中，SKU...
本教程将深入讲解如何利用 jQuery 来操作表格，以实现更高效、更简洁的代码。 首先，理解 HTML 表格的基础结构至关重要。表格由 `<table>` 标签定义，`<tr>` 代表表格行，`<th>` 用于表头，而 `<td>` 用于单元格...
- **jQuery表格(table)操作技巧汇总**：学习如何使用jQuery对表格进行各种操作，比如排序、筛选、分页等。 - **jQuery操作json数据技巧汇总**：掌握如何在jQuery中有效地操作JSON数据，包括解析JSON、生成JSON等。 -...
在IT领域，jQuery是一款...总的来说，这个压缩包提供了实现动态表格排序的jQuery代码示例，对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些知识点，开发者可以创建更高效、用户友好的数据展示界面。
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...
本教程将深入讲解如何在表格中集成 jQuery Tooltip，并展示一个基于 "jQuery_tooltip_demo_in_table_by_dota" 的示例。 首先，你需要确保已经在项目中引入了 jQuery 和 jQuery Tooltip 插件。通常，这可以通过在 ...
标题中的“jQuery商品SKU表格实例代码.zip”表明这是一个关于使用jQuery实现的商品库存单元(SKU)管理的代码示例。在电子商务网站中，SKU是用于唯一标识商品变体的编码，通常包括颜色、尺寸等属性。这个压缩包可能...
而“使用jQuery UI实现表格排序功能”是网页交互设计中的常见需求，尤其对于数据展示丰富的网页，如报表、数据分析页面等。jQuery UI 的 tablesorter 插件可以方便地实现这一功能，让表格数据可以根据用户的需求进行...
jQuery表格键盘操作插件 jquery KeyTable调用示例,这款插件允许用户在表格移动/选择数据像键盘操作Excel那样,不依赖鼠标就可完成各项操作.并且高亮当前操作的表格单元格.运行效果请参见截图，本源码包内含有调用本...
在网页开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了 DOM 操作、事件处理以及动画效果。在这个场景中，我们关注的是如何使用 jQuery 动态创建表格，并且为表格的每个单元格赋予随机背景颜色。这通常用于...
总结来说，利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性，使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery，开发者可以...
在实现这个效果时，jQuery的核心优势在于其强大的DOM操作能力，能够轻松地获取和操作表格元素，并实时响应用户的滚动行为。 实现这个效果的基本步骤包括： 1. **选择元素**：首先，我们需要选择表格的thead（表头...
以上是基于“JQuery插件实现表格排序”的主要技术点，具体实现可能还需要结合实际的代码示例和博客中的详细步骤。在实际学习过程中，建议参考该博客或其他相关的教程，通过动手实践来加深理解和掌握这些知识点。
<title>jQuery表格排序示例 <!-- 引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5/9en7Un/yQ==" crossorigin="anonymous"></script> ...
本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格，这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点： 1. **Bootstrap**：Bootstrap 是一个流行的开源 CSS 框架，它提供...
此外，对于大型表格，可能还需要优化性能，避免每次窗口滚动都执行复杂操作。 `jQuery`库提供的便利性使得我们可以轻松地实现表头固定效果，而无需深入了解底层的CSS和JavaScript实现细节。但需要注意的是，虽然`...