jquery实现递归table-tr

最新推荐文章于 2024-08-15 09:22:12 发布
最新推荐文章于 2024-08-15 09:22:12 发布
阅读量762 收藏
点赞数
分类专栏： javascript
本文为博主原创文章，只为分享而编，欢迎各位学习以及转载。
本文链接：https://blog.csdn.net/qq285679784/article/details/77978112
版权



将文件代码保存到本地html中下载demo，引入js下载jquery.1.83.min.js看效果。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery实现递归table-tr</title>
    <style type="text/css">
        /*表格*/
        .table{border-collapse: collapse; word-break: keep-all; border:1px solid Black;}
        .table.borgray{ border:1px solid #dfdfdf;}
        .table th, .table td{border: 0;padding: 5px; font-size:12px;} 
        .table.borgray th,.table.borgray td{ border:1px solid #dfdfdf;}
        .table .th{height: 20px;border: 1px solid windowtext; padding: 0 2pt 0 2pt; background-color: #fff; } 
        .table .td{border: 1px solid windowtext;} 
        .table tr.dashed>th,.table tr.dashed>td{ border-style:dashed;} 
        .table tr.dotted>th,.table tr.dotted>td{ border-style:dotted;} 
        .table .th.dashed,.table .td.dashed{ border-style:dashed;} 
        .table .th.dotted,.table .td.dotted{ border-style:dotted;} 
        .table .td.gray{color: #999;}
        .w100 {width: 100%;}
        .mag20 {margin: 20px;}
    </style>
    <script src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $node_array = new Array();
            var $tr; var $tr_index; var $td; var $top; var $find_tr
            var $level; var $pcpid; var $scpid;
            var $t_level; var $t_pcpid; var $t_scpid;

            //更换零配件/重新组合零配件
            $("#btnchange").live("click", function () {

                $tr = $(this).parent().parent(); //btnchange<td<tr
                $tr_index = $tr.index();
                $td = $(this).parent(); //btnchange>td
                $level = $tr.attr("bom-level"); //层级
                $pcpid = $tr.attr("bom-pcpid"); //父级ID
                $scpid = $tr.attr("bom-scpid"); //当前ID

                //恢复所有外框，取消虚线
                $(".tbBomItem tbody:first").children('tr').removeClass("dashed"); //.tbBomItem>tbody>tr>td

                //待更换配件表格部分外框虚线显示
                $tr.addClass("dashed"); //btnchange<td<tr<td

                $node_array = new Array();
                $node_array.push($tr_index);
                FindChildNode($level, $scpid); //递归所有tr子节点，并添加class-dashed

                alert("tr-index：" + $node_array);
            });

            //重置组合
            $("#btnreset").live("click", function () {
                //恢复外框，取消虚线
                $(".tbBomItem tbody:first").children("tr").removeClass("dashed");
            });

            //递归tr，获取所有子节点并返回tr-index的Array
            //level 当前层级
            //pcpid 当前scpid
            function FindChildNode(level, pcpid) {
                var $f_tr = $(".tbBomItem tbody:first").children("tr[bom-level=" + (parseInt(level) + 1) + "][bom-pcpid=" + pcpid + "]");
                $f_tr.each(function (i) {

                    var $f_level = $(this).attr("bom-level"); //当前层级
                    var $f_scpid = $(this).attr("bom-scpid"); //当前scpid

                    $(this).addClass("dashed"); //当前行，边框虚线显示
                    $node_array.push($(this).index());

                    FindChildNode($f_level, $f_scpid); //递归所有子节点
                });
            }
        });
    </script>
</head>
<body>
<pre>
根据bom-scpid，查找所有bom-pcpid=bom-scpid的tr子节点，递归将tr-index写入Array，并返回Array
<tr bom-level="1" bom-pcpid="78618" bom-scpid="78621">BCB3-130矿用隔爆型插销连接器；index:2</tr>
<tr bom-level="2" bom-pcpid="78621" bom-scpid="78622">DXK直变器；index:3</tr>
<tr bom-level="2" bom-pcpid="78621" bom-scpid="78623">DXK控制电源；index:4</tr>
</pre>

    <table class="tbBomItem table w100 mag_b20" cellspacing="0" cellpadding="0" align="center">
        <tbody>
            <tr>
                <td class="th" colspan="11" align="center">
                    2.5T蓄电池式电机车
                </td>
            </tr>
            <tr align="center">
                <td class="th" style="width: 5%" nowrap="">
                    序号
                </td>
                <td class="th" style="width: 5%" nowrap="">
                    ChildNodes
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    BOM类型
                </td>
                <td class="th" nowrap="">
                    层级
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    产品类型
                </td>
                <td class="th" nowrap="">
                    产品名称
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    规格型号
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    计量单位
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    订货数量
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    订货单价
                </td>
                <td class="th" style="width: 10%" nowrap="">
                    合计
                </td>
            </tr>

            <tr bom-level="1" bom-pcpid="78618" bom-scpid="78621">
                <td class="td" nowrap="" align="center">
                    1
                </td>
                <td class="td bom-content" style="position: relative; color: #999;" nowrap="" align="center">
                    <a href="javascript:;" id="btnchange">获取</a>
                </td>
                <td class="td" nowrap="" align="center">
                    零部件
                </td>
                <td class="td" nowrap="" align="center">
                    1
                </td>
                <td class="td" nowrap="" align="center">
                    电器配件
                </td>
                <td class="td" nowrap="">
                    BCB3-130矿用隔爆型插销连接器
                </td>
                <td class="td" nowrap="" align="center">
                    SPEC
                </td>
                <td class="td" nowrap="" align="center">
                    件
                </td>
                <td class="td" nowrap="" align="center">
                    1
                </td>
                <td class="td" nowrap="" align="center">
                    ¥299.00
                </td>
                <td class="td" nowrap="" align="center">
                    ¥299.00
                </td>
            </tr>

            <tr bom-level="2" bom-pcpid="78621" bom-scpid="78622">
                <td class="td" nowrap="" align="center">
                    2
                </td>
                <td class="td bom-content" style="position: relative; color: #999;" nowrap="" align="center">
                    <a href="javascript:;" id="btnchange">获取</a>
                </td>
                <td class="td" nowrap="" align="center">
                    零部件
                </td>
                <td class="td" nowrap="" align="center">
                    2
                </td>
                <td class="td" nowrap="" align="center">
                    电器配件
                </td>
                <td class="td" nowrap="">
                    DXK直变器
                </td>
                <td class="td" nowrap="" align="center">
                    SPEC
                </td>
                <td class="td" nowrap="" align="center">
                    件
                </td>
                <td class="td" nowrap="" align="center">
                    1
                </td>
                <td class="td" nowrap="" align="center">
                    ¥199.00
                </td>
                <td class="td" nowrap="" align="center">
                    ¥199.00
                </td>
            </tr>

            <tr bom-level="2" bom-pcpid="78621" bom-scpid="78623">
                <td class="td" nowrap="" align="center">
                    3
                </td>
                <td class="td bom-content" style="position: relative; color: #999;" nowrap="" align="center">
                    <a href="javascript:;" id="btnchange">获取</a>
                </td>
                <td class="td" nowrap="" align="center">
                    零部件
                </td>
                <td class="td" nowrap="" align="center">
                    2
                </td>
                <td class="td" nowrap="" align="center">
                    电器配件
                </td>
                <td class="td" nowrap="">
                    DXK控制电源
                </td>
                <td class="td" nowrap="" align="center">
                    SPEC
                </td>
                <td class="td" nowrap="" align="center">
                    件
                </td>
                <td class="td" nowrap="" align="center">
                    1
                </td>
                <td class="td" nowrap="" align="center">
                    ¥100.00
                </td>
                <td class="td" nowrap="" align="center">
                    ¥100.00
                </td>
            </tr>

            <tr>
                <td class="td" colspan="2" align="center">
                    <a href="javascript:;" id="btnreset">重置Table</a>
                </td>
                <td class="td" colspan="8" align="left">
                     
                </td>
                <td class="td" align="center">
                    <label id="lblTotalPrice">
                        ¥299.00
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>


ChinaLzw
关注
专栏目录
jquery递归合并表格 行
yimeng123520的博客
01-25 294
/** * 操作表格 递归合并单元格 行 * 2019年1月25日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.fn.mergeCel...
js js中的递归
梦想家博客
04-03 430
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&q
JavaScript基础——递归
最新发布
weixin_64294248的博客
08-15 519
递归就是指函数调用自身（自己调用自己），使用时必须有终止递归的条件。递归可以根据条件执行重复的业务逻辑代码，类似循环语句，但功能比循环灵活，强大。JavaScript 中的递归是一种函数调用自身的技术，它允许函数在执行过程中调用自己。递归通常用于解决可以被分解为相似子问题的问题，例如树的遍历、排序算法（如快速排序和归并排序）、计算阶乘、斐波那契数列等。递归的基本语法，其中函数调用自身的方式并不是唯一的，可以作为计算或函数返回值调用自身等。
jquery实现递归tr子节点
09-14
jquery实现递归table-tr，可并记录tr对应的index，写入Array中，方便后期处理。 jquery实现递归table-tr，可并记录tr对应的index，写入Array中，方便后期处理。
jQuery实现递归
javaACMer的专栏
04-20 8591
前几天公司做一个递归， 是这样子的形式：    测试1                   测试1.1            测试1.2              测试2 用到了json串 源代码如下： Insert title here          var childli
遍历key，递归调用jQuery.access
大白菜代码哥
08-11 982
 1.首先判断key值是不是一个object，如果是，遍历key，递归调用jQuery.access，并将是否可以链式调用的标志位设置为true 2.判断value值是否已经定义，如果已经定义，说明是个set操作 2.1 set操作的是可链式调用的 2.2 如果value不是function，设置raw为true 2.3 判断key值是否为null或者unde
jquery实现递归tr子节点.zip
06-10
这个"jquery实现递归tr子节点.zip"文件显然与网页表格（table）的操作有关，特别是涉及到HTML表格的DOM遍历，尤其是递归地查找和操作表格中的行（tr）元素。在网页开发中，表格数据结构常常用于展示层次化信息，例如...
jQuery获取table下某一行某一列的值实现代码
10-20
2. find方法：在获得div后，使用.find("table[name='info']")方法来选取所有具有特定name属性的表格。find方法用于在指定的元素集合中递归地搜索所有匹配的后代元素。 3. 遍历表格：通过for循环结合.eq(i)方法遍历...
jquery实现自定义树形表格的方法【自定义树形结构table】
10-16
本文介绍的是一种使用jQuery实现自定义树形表格的方法。jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，因此在前端开发中被广泛使用。 自定义树形表格的核心...
jq学习手册-递归
IKUNzhenin的博客
03-28 355
jQuery 本身并不直接提供递归功能，但你可以在使用 jQuery 时结合 JavaScript 的递归逻辑。例如，你可能需要递归地遍历 DOM 元素，处理嵌套的列表或其他结构。假设你有一个嵌套的 列表，你想为每个 元素添加一些样式或行为。HTML 结构：jQuery 递归函数：注意要引入jquery文件（）
jquery用递归实现菜单选择
09-06
通过递归实现不定层菜单选择，点击菜单项之后，自动完成父菜单子菜单的选择等功能
jquery使用递归制作树形菜单
勋勋勋勋小勋勋的博客
10-17 774
效果： let jsonDatas = [ { name: "一级1", children: [ { name: "二级1-1", children: [ { ...
JQuery递归解析无限层级JSON对象的所有key和value
程序员星痕的博客
07-29 9374
前一段时间做了一个小项目，要加一个json数据自动绑定前台表单的功能，类似于jquery-easyui里面的数据绑定（给它一个json对象，就能自动解析里面所有的数据。json数据的key对于表单的name属性，也可以是id或自己定义的标签属性，把key对应的值赋给对应名称的表单）。百度了许多JSON解析，都是前提知道json结构的情况下的解析，毛线的一点用都没有，最后看了一篇博客，明白了解析key
DataTable 递归 简单的程序，来实现无限级列表 结合 jquery.table.js 实现
weixin_30814319的博客
07-28 201
protected void DiGuiDataTable(DataTable FromDataTable, DataTable ToDataTable, object pid) { if (FromDataTable.Select("pid='" + pid + "'").Length > 0) { foreac...
jQuery 数字自增
小羽向前跑
02-26 2677
最终效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
table表格封装
weixin_43724569的博客
02-08 129
【代码】table表格封装。
jQuery中利用递归思想练习自定义动画
Json的知识梦工厂
06-23 745
技术QQ交流群:294088839         自定义动画             div{             width: 100px;             height: 100px;             background:red;             position: absolute;             top: 50
jquery+递归自动生成无限级菜单
Logan_Su的博客
11-26 1422
由于本人对于前端实在是不怎么样，所以按钮就不制作了，只是用普通的文字表达就可以了，思路才是最重要的。 首先得引入jquery，这里我用的是jquery-1.8.2.min。代码如下： <!DOCTYPE html> <html> <head> <meta charset="GB18030"> <title>Insert title here</title> <style type="text/cs
Jquery实现递归加载的树状结构效果
在本文档中，我们探讨了如何使用jQuery实现一个动态的、类似树形结构的网页层次加载功能。这个功能的核心在于利用`load()`函数，它允许我们在前端通过AJAX技术异步加载页面的一部分内容到指定的HTML元素中。以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值