<!----><script type="text/javascript" src="http://www.cnblogs.com/Files/liydotnet/jquery-1.2.3.js"></script>
<style type="text/css">
.mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px}
.mainTable td{ height:22px}
.line{ background-color:#fffff7; height:25px}
.line-none{ background-color:#fffff7; height:25px}
.selected{ background-color:#fff5fa}
.template{ background-color:#ffffdd;display:none; color:#e8f5fe}
.mainTable a{ margin-right:6px}
.mainTable a:link{color:#92b0dd }
.mainTable a:visited{color:#92b0dd}
.mainTable a:hover{color:#FF0000}
</style>
<table class="mainTable" cellspacing="1" cellpadding="1">
<tbody>
<tr class="template">
<td style="padding-left: 5px" colspan="3"></td>
</tr>
<tr class="line">
<td style="padding-left: 6px"></td>
<td></td>
<td style="width: 30%" align="center"><a onclick="javascript:do_select(this)" href="javascript:;">选择</a> <a onclick="javascript:do_add(this)" href="javascript:;">增加一行↑</a> <a onclick="javascript:do_copy(this)" href="javascript:;">复制此行↓</a> <a onclick="javascript:do_delete(this)" href="javascript:;">删除</a> </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function do_select(aa)
{
var id=$(aa);
id.parents("tr").addClass("selected");
id.attr("onclick","javascript:do_reset(this)").html("取消")
}
function do_reset(aa)
{
var id=$(aa);
id.parents("tr").removeClass("selected");
id.attr("onclick","javascript:do_select(this)").html("选择")
}
function do_copy(aa)
{
var id=$(aa);
var copy=id.parents("tr").clone();
var first=copy.find("td:first");
first.html("》"+first.html())
id.parents("tr").after(copy);
}
function do_add(aa)
{
var id=$(aa);
var template=$(".template").clone().attr("class","line-none");
var add=$(".line-none");
id.parents("tr").prev(".line-none").remove();
template.show().find("td:eq(0)").html("我是根据模板复制的的");
id.parents("tr").before(template);
}
function do_delete(aa)
{
var id=$(aa);
id.parents("tr").remove();
}
</script>
分享到:
相关推荐
本文将深入探讨如何使用jQuery操作表格,基于给出的资源,我们可以看到一个与表格相关的示例。 首先,"tb-bg.gif"可能是一个表格背景图像,用于美化表格的视觉效果。在网页设计中,背景图片可以提升表格的整体风格...
jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现各种功能,包括表格分页。本篇文章将深入探讨jQuery插件在实现表格分页中的应用及其相关知识点。 一、jQuery和表格分页基础 1. jQuery...
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果以及Ajax交互。本教程将深入讲解如何利用 jQuery 来操作表格,以实现更高效、更简洁的代码。 首先,理解 HTML 表格的...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨jQuery在表格操作方面的应用实例,这对于前端开发人员来说是极其重要的技能。 首先...
本文将深入探讨如何使用jQuery实现两个表格之间的数据行交换功能,这是一个常见的需求,特别是在用户界面设计中,用户可能需要重新排序或比较表格数据。 首先,让我们理解表格(TableView)的基本结构。在HTML中,...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将详细讲解如何使用jQuery来操作表格,实现增删功能。 一、表格的基本结构 HTML表格由`<table>`...
4. **jQuery操作DOM**: jQuery提供了丰富的API来选择、操作和修改HTML元素,这对于处理不规则表格非常有用。例如,使用`$(selector).append()`可以动态添加行或列,`$(selector).remove()`用于删除元素,`$...
【jQuery网页版Excel表格代码】是一个使用JavaScript库jQuery实现的在线表格工具,它允许用户在网页上创建、编辑和操作类似Excel的工作表。这个项目可能是针对那些需要在Web应用中集成表格功能,但又不想依赖于大型...
jQuery通过一个选择器(如$("#elementId"))选取DOM元素,然后对这些元素执行各种方法,如`.append()`、`.remove()`等。在表格上下文中,`<table>`、`<tr>`、`<td>`是关键元素,我们需要操作它们来添加或删除行。 ...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作。本教程将探讨如何利用jQuery实现一个可编辑的表格,让用户体验到更加交互式的数据管理。 首先,我们需要理解HTML表格...
本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先,我们需要在HTML中构建基本的表格结构。表头`<thead>`通常包含表的列名,而表体`<tbody>`则包含实际的数据行。例如: ```html ...
首先,这个解决方案基于jQuery库,一个广泛使用的JavaScript库,提供了丰富的DOM操作、事件处理和动画功能。jQuery简化了HTML文档遍历、事件处理、动画和Ajax交互,使得开发者可以更快速、更简洁地编写JavaScript...
在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨“jquery入门之双色表格”,教你如何利用jQuery实现一个鼠标悬停时背景颜色变化的双色...
这个过程涉及到DOM操作,需要在排序后更新表格元素的位置,以反映新的排序结果。 在实现过程中,首先需要引入jQuery库以及相应的可排序表格插件,例如jQuery UI的Sortable或DataTables插件。jQuery UI的Sortable...
` 获取一个表格引用(假设通过某种方式,例如一个ID或者类选择器,已经被选中),记为`tbl`。 - `var rows = tbl.rows.length;` 获取当前表格的行数。 - `var tr = tbl.insertRow(rows);` 在表格的最后一行之后...
首先,在HTML文件中引入jQuery库,并设置一个空的表格结构: ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 列1 列2 <!-- 更多列头 --> ...
总结起来,"jQuery控件简易日历表格代码"提供了一个快速构建日历功能的解决方案,利用jQuery的便利性和广泛兼容性,降低了开发复杂度。通过深入理解和修改这些代码,开发者可以进一步优化日历控件,提高用户体验,...
"jiaoben4920"可能是一个示例脚本或CSS样式文件,配合HTML表格一同展示效果。 总的来说,这个压缩包提供了实现动态表格排序的jQuery代码示例,对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些...
综上所述,“jquery表格排序操作”是一个实用的功能,结合了jQuery的便捷性和JavaScript的灵活性,使得在myeclipse或其他开发环境中快速实现表格排序成为可能。遵循开源原则,这个功能可以方便地被其他开发者集成到...
在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能,从而使用户可以根据需要调整表格的...