jQuery 删除行（带跨行的表格）

  • 实现效果，点击删除按钮后，在保证原来表格结构的基础上，移除当前行。

  • 代码原理：

1、点击行后判断当前行的第一个<td>,是否包含rowspan属性，如果包含，把rowspan减去1，把这个<td>插入到下一行，移除当前行。

2、如果当前行不包含rowspan属性，找到它上一级定义rowspan属性的列，将其rowspan减去1，移除当前行。

实现代码：需要引入 jquery-1.7.2.min.js

  • 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script src="jquery-1.7.2.min.js"></script>

    <script language="javascript">

        $(function() {

            $("#table input[type='button'][name^='button']").click(function() {

                var tr = $(this).parent().parent();  　　　// 当前行

                var trIndex = tr.index();    　　　　　 // 当前行索引

                var firstTD = tr.children().eq(0);     // 当前行第一个td

                // 判断当前行第一列是否包含 rowspan 属性

                if ( typeof(firstTD.attr("rowspan")) != "undefined") {

                    var firstTDText = firstTD.text(); // 获取此行第一列内容

                    var rowspan = firstTD.attr("rowspan");

                    if (rowspan != 1) {

                        // 将td插入到下一行

                        tr.next().children().eq(0).before("<td rowspan="+(rowspan-1)+">"+firstTDText+"</td>");

                    }

                }

                else {

                    // 带有 rowspan 属性的行的索引

                    var rowspanIndex = 0;

                    $("#table tr td[rowspan]").each(function(i) {

                        var rowspan = $("#table tr td[rowspan]").eq(i).attr("rowspan");

                        if (parseInt(rowspan) >= trIndex) return false;

                        trIndex = trIndex - parseInt(rowspan);

                        rowspanIndex += 1;

                    });

                    var rowspan = $("#table tr td[rowspan]").eq(rowspanIndex).attr("rowspan");

                    $("#table tr td[rowspan]").eq(rowspanIndex).attr("rowspan",rowspan-1);

                }

                tr.remove();

            })

        });

    </script>

    <title>无标题文档</title>

    </head>

    <body>

    <table width="498" border="1" align="center" style="text-align:center" id="table" cellpadding="0" cellspacing="0">

        <tr>

            <th width="95" scope="col">类别</th>

            <th width="114" scope="col">名称</th>

            <th width="92" scope="col">价格</th>

            <th width="87" scope="col">级别</th>

            <th width="98" scope="col">状态</th>

        </tr>

        <tr>

            <td rowspan="4">笔记本</td>

            <td>Acer</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button" id="button" value="删除" /></td>

        </tr>

        <tr>

            <td>华硕</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button2" id="button2" value="删除" /></td>

        </tr>

        <tr>

            <td>DELL</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button3" id="button3" value="删除" /></td>

        </tr>

                <tr>

            <td>DELL</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button3" id="button3" value="删除" /></td>

        </tr>

        <tr>

            <td rowspan="3">台式机</td>

            <td>台式机11</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button4" id="button4" value="删除" /></td>

        </tr>

        <tr>

            <td>台式机22</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button5" id="button5" value="删除" /></td>

        </tr>

        <tr>

            <td>台式机33</td>

            <td>4900</td>

            <td>1</td>

            <td><input type="button" name="button6" id="button6" value="删除" /></td>

        </tr>

        <tr>

            <td rowspan="3">服务器</td>

            <td>服务器11</td>

            <td>19999</td>

            <td>1</td>

            <td><input type="button" name="button7" id="button7" value="删除" /></td>

        </tr>

        <tr>

            <td>服务器22</td>

            <td>19999</td>

            <td>1</td>

            <td><input type="button" name="button8" id="button8" value="删除" /></td>

        </tr>

        <tr>

            <td>服务器33</td>

            <td>19999</td>

            <td>1</td>

            <td><input type="button" name="button9" id="button9" value="删除" /></td>

        </tr>

    </table>

    </body>

</html>

jQuery 删除行（带跨行的表格）的更多相关文章

  1. jquery完成带单选按钮的表格行高亮显示

    jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...

  2. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  3. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  4. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  5. JQuery中操作表单和表格

    一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  6. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  7. jQuery自带的一些常用方法总结

    jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需 ...

  8. 怎样用jQuery自带方法/函数来获取outerHTML属性

    原文地址:http://jingyan.baidu.com/article/7f41ececf93b48593d095c25.html 包括我自己在内(其实我也就这两天才知道这样可以快速获取的),很多 ...

  9. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

随机推荐

  1. 第七周编程总结&&实验报告五

    实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 Java 系统包的结构. ...

  2. 关于JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: var test = document.getElementById( ...

  3. JS 获取json key和value

    var json= { "Type": "Coding", "Height":100 }; for (var key in json) { ...

  4. CRF条件随机场在机器视觉中的解释

    CRF是一种判别模型,本质是给定观察值集合的马尔科夫随机场(MRF),而MRF是加了马尔科夫性质限制的随机场. 马尔科夫性质:全局.局部.成对 随机场:看做一组随机变量的集合(对应于同一个样本空间), ...

  5. git使用记录四：.git分析

    git使用记录四: .git 查看.git 目录下的文件 soaeon@DESKTOP-FUJJTHR MINGW64 /f/gitstudy/.git (GIT_DIR!) $ ls -al tot ...

  6. C#后台将string="23.00"转换成int类型

    在C# 后台将String类型转换成int 有以下几种方法: (1)  int.TryParse(string); (2) Convert.Toint32(string); (3) (int)stri ...

  7. 好用的打包工具webpack

    <什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...

  8. 【转】在配置静态IP的时候遇到 ：bringing up interface eth0 : error unknown connection

    首先这是动态ip配置成功的结果 接下来切换到root用户来配置静态的 按照静态ip的配置方法配置好文件后(具体过程这里就不多加说明) 然后保存退出 当我们重启网卡的时候问题来了(因为本人有点强迫症,多 ...

  9. mysql修改root密码和设置权限 转摘：http://www.cnblogs.com/wangs/p/3346767.html

    整理了以下四种在MySQL中修改root密码的方法,可能对大家有所帮助! 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR ' ...

  10. microtime函数用法

    /** * microtime函数 * 返回:如果参数为空,则返回字符串 "微妙部分(单位:秒) 秒",字符串的两部分都是以"秒"为单位返回的 * 如果参数为 ...