`

JQuery操作一个表格

阅读更多
<!----><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 操作表格

    本文将深入探讨如何使用jQuery操作表格,基于给出的资源,我们可以看到一个与表格相关的示例。 首先,"tb-bg.gif"可能是一个表格背景图像,用于美化表格的视觉效果。在网页设计中,背景图片可以提升表格的整体风格...

    jquery插件--表格分页

    jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现各种功能,包括表格分页。本篇文章将深入探讨jQuery插件在实现表格分页中的应用及其相关知识点。 一、jQuery和表格分页基础 1. jQuery...

    使用 Jquery 操作表格

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果以及Ajax交互。本教程将深入讲解如何利用 jQuery 来操作表格,以实现更高效、更简洁的代码。 首先,理解 HTML 表格的...

    jquery表格操作实例

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨jQuery在表格操作方面的应用实例,这对于前端开发人员来说是极其重要的技能。 首先...

    jquery 两个表格数据行交换数据

    本文将深入探讨如何使用jQuery实现两个表格之间的数据行交换功能,这是一个常见的需求,特别是在用户界面设计中,用户可能需要重新排序或比较表格数据。 首先,让我们理解表格(TableView)的基本结构。在HTML中,...

    jquery操作表格增加删除

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本文将详细讲解如何使用jQuery来操作表格,实现增删功能。 一、表格的基本结构 HTML表格由`&lt;table&gt;`...

    asp.net处理不规则表格 结合jquery处理不规则表格

    4. **jQuery操作DOM**: jQuery提供了丰富的API来选择、操作和修改HTML元素,这对于处理不规则表格非常有用。例如,使用`$(selector).append()`可以动态添加行或列,`$(selector).remove()`用于删除元素,`$...

    jQuery网页版excel表格代码.zip

    【jQuery网页版Excel表格代码】是一个使用JavaScript库jQuery实现的在线表格工具,它允许用户在网页上创建、编辑和操作类似Excel的工作表。这个项目可能是针对那些需要在Web应用中集成表格功能,但又不想依赖于大型...

    jquery 添加、删除表格

    jQuery通过一个选择器(如$("#elementId"))选取DOM元素,然后对这些元素执行各种方法,如`.append()`、`.remove()`等。在表格上下文中,`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`是关键元素,我们需要操作它们来添加或删除行。 ...

    jQuery实现可编辑表格

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作。本教程将探讨如何利用jQuery实现一个可编辑的表格,让用户体验到更加交互式的数据管理。 首先,我们需要理解HTML表格...

    jQuery实现表头固定表格内容滚动效果

    本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先,我们需要在HTML中构建基本的表格结构。表头`&lt;thead&gt;`通常包含表的列名,而表体`&lt;tbody&gt;`则包含实际的数据行。例如: ```html ...

    jQuery网页下拉滚动表格头部固定在顶端代码

    首先,这个解决方案基于jQuery库,一个广泛使用的JavaScript库,提供了丰富的DOM操作、事件处理和动画功能。jQuery简化了HTML文档遍历、事件处理、动画和Ajax交互,使得开发者可以更快速、更简洁地编写JavaScript...

    jquery入门之双色表格

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨“jquery入门之双色表格”,教你如何利用jQuery实现一个鼠标悬停时背景颜色变化的双色...

    Jquery 可排序的表格

    这个过程涉及到DOM操作,需要在排序后更新表格元素的位置,以反映新的排序结果。 在实现过程中,首先需要引入jQuery库以及相应的可排序表格插件,例如jQuery UI的Sortable或DataTables插件。jQuery UI的Sortable...

    JQuery实现动态表格点击按钮表格增加一行

    ` 获取一个表格引用(假设通过某种方式,例如一个ID或者类选择器,已经被选中),记为`tbl`。 - `var rows = tbl.rows.length;` 获取当前表格的行数。 - `var tr = tbl.insertRow(rows);` 在表格的最后一行之后...

    servlet+jquery表格数据填充

    首先,在HTML文件中引入jQuery库,并设置一个空的表格结构: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 列1 列2 &lt;!-- 更多列头 --&gt; ...

    jQuery控件简易日历表格代码.zip

    总结起来,"jQuery控件简易日历表格代码"提供了一个快速构建日历功能的解决方案,利用jQuery的便利性和广泛兼容性,降低了开发复杂度。通过深入理解和修改这些代码,开发者可以进一步优化日历控件,提高用户体验,...

    jQuery Table表格排序显示代码.zip

    "jiaoben4920"可能是一个示例脚本或CSS样式文件,配合HTML表格一同展示效果。 总的来说,这个压缩包提供了实现动态表格排序的jQuery代码示例,对于学习和提升网页开发中的交互体验非常有价值。通过理解和实践这些...

    jquery表格排序操作

    综上所述,“jquery表格排序操作”是一个实用的功能,结合了jQuery的便捷性和JavaScript的灵活性,使得在myeclipse或其他开发环境中快速实现表格排序成为可能。遵循开源原则,这个功能可以方便地被其他开发者集成到...

    jquery插件colResizable实现表格列可拖拽伸缩表格大小

    在JavaScript的世界里,jQuery是一个广泛使用的库,它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能,从而使用户可以根据需要调整表格的...

Global site tag (gtag.js) - Google Analytics