jquery实现递归table-tr
来源：互联网 发布：python爬虫爬取微信 编辑：程序博客网 时间：2024/05/20 19:15
将文件代码保存到本地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>阅读全文
0 0
- jquery实现递归table-tr
- JQuery实现table的排序（tr）
- jquery 编辑table tr
- jquery 编辑table tr
- Jquery 实现html table 行 Tr 的复制
- jQuery实现动态添加tr到table的方法
- jquery实现table tr td重组排序号
- jquery中table追加tr
- Jquery 实现html table 行 Tr 的复制 . table追加 消除
- Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
- Table实现tr数据滚动
- angularjs实现table增加tr
- jquery 单击table获取tr id
- jquery 动态添加 tr 到 table
- jquery 控制table tr 上下移动
- jquery动态往table添加tr
- 【jquery】table表格添加tr，添加…
- jquery给table动态添加tr
- 根Activity组件启动过程
- Linux批量清空当前目录中的日志文件
- HTML2.2表格
- MyBatis高级映射之一对一查询
- Matlab函数运行时间的三种计算方法
- jquery实现递归table-tr
- Ubuntu16.04 安装xgboost（anaconda3）
- 第二周项目3体验复杂度
- 外部调用 docker API
- IOS swift 从入门到弃坑——第一章节
- 第三周项目一
- 行指针
- 使用spring aop 解决问题
- 《C++ Primer》第五版课后习题解答_第六章（2）(08-15)
