JQuery

jquery实现递归table-tr

2020-10-28 17:18发布

站内文章 / jQuery
1091 0 0



将文件代码保存到本地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>


作者：China_Lzw
链接：https://blog.csdn.net/qq285679784/article/details/77978112
来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。

           
              
                            

                     




                



            

      

         



   

   

    

       

       
      

 

            
    








   

   




                  

                         

                         
     

  
  


  
  
    
         

  
  
  
                  

            

               

            
        

      







    
    
   


  
  • 
    
    
    •