js比对两个table的tbody的数据，一个字段是否有相同的，或其他

Posted 2021-03-07 QW-lzm

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js比对两个table的tbody的数据，一个字段是否有相同的，或其他相关的知识，希望对你有一定的参考价值。

<html>
<header>

</header>

<body>

    <!-- 装备清单 -->
    <div id="zbqd">
            <table border="1" cellspacing="0"
                style=" border-collapse: collapse;font-size: 14px;">
                <thead>
                    <tr>
                        <th colspan="3" height="40px;" style="width: 295px;">装备清单</th>
                        <th colspan="1" align="center" style="width: 70px;">
                            <input type="button" id="ok" class="optInput" value="调拨" onclick="pushEq()" />
                        </th>
                    </tr>
                </thead>
                <tbody id="qdtbody">
                    <tr>
                        <th align=‘center‘ style=‘width: 120px;‘>装备名称</th>
                        <th align=‘center‘>数量</th>
                        <th align=‘center‘ style=‘width:47px‘>调拨数</th>
                        <th align=‘center‘ style=‘width: 156px;‘>存放地址</th>
                    </tr>
                    
                    <tr id="1">
                        <td align=‘center‘>信号枪</td>
                        <td align=‘center‘>25</td>
                        <td align=‘center‘><input type=‘text‘ style=‘width: 40px;height: 30px;‘ id=‘qd1‘ value=‘0‘ /></td>
                        <td align=‘center‘>西湖路</td>
                    </tr>
                    <tr id="2">
                        <td align=‘center‘>装备包</td>
                        <td align=‘center‘>30</td>
                        <td align=‘center‘><input type=‘text‘ style=‘width: 40px;height: 30px;‘ id=‘qd2‘ value=‘0‘ /></td>
                        <td align=‘center‘>起义路</td>
                    </tr>

                    <tr id="3">
                        <td align=‘center‘>探测器</td>
                        <td align=‘center‘>12</td>
                        <td align=‘center‘><input type=‘text‘ style=‘width: 40px;height: 30px;‘ id=‘qd3‘ value=‘0‘ /></td>
                        <td align=‘center‘>起义路</td>
                    </tr>
                    
                </tbody>
            </table>
        </div>
        <br>

        <div id="zdzb">
                <table border="1" cellspacing="0" style=" border-collapse: collapse;width: 300px;">
                    <thead>
                        <tr>
                            <th colspan="4" height="40px;">战斗单元配置标准</th>
                        </tr>
                    </thead>
                    <tbody id="zdzbtbody">

                            <tr>
                                <th align=‘center‘ style=‘width: 120px;‘>装备名称</th>
                                <th align=‘center‘ style=‘width:47px‘>数量</th>
                            </tr>
                            
                            <tr>
                                <td align=‘center‘>信号枪</td>
                                <td align=‘center‘>10</td>
                            </tr>
                            <tr>
                                <td align=‘center‘>装备包</td>
                                <td align=‘center‘>50</td>
                            </tr>

                    </tbody>
                </table>
            </div>
            <br>

            <input type="button" id="ok" class="optInput" value="确认" onclick="pushEq()" />

            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <script src="demo.js"></script>

</body>
</html>

demo.js

function pushEq(){

    // var qdtbody = document.getElementById("qdtbody");
    // var qdrows = qdtbody.rows;

    // 用战斗装备配置的去比对   装备清单的数据
    var tbody = document.getElementById("zdzbtbody");
    var rows = tbody.rows;

    for(var i=1; i<rows.length;i++){
        var cells=rows[i].cells;
        
        var a;  //装备名称
        var b;  //战斗装备数量

        for(var j=0;j<cells.length;j++){
            if(j==0){
                a = cells[j].innerHTML;
                console.log("战斗装备名称: "+a);

            }
            if(j==1){
                b = cells[j].innerHTML;
                console.log(b);
            }
            
        }

        var qdtbody = document.getElementById("qdtbody");
        var qdrows = qdtbody.rows;
        for(var k=1; k<qdrows.length; k++){
            var qdcells=qdrows[k].cells;

            // 装备清单
            var aa;
            var bb;
            for(var l=0;l<qdcells.length;l++){

                if(l==0){
                    aa = qdcells[l].innerHTML;
                }
                if(l==1){
                    bb = qdcells[l].innerHTML;
                    continue;
                }
            }

            if(a == aa && parseInt(b)<parseInt(bb)){
                console.log("黄色字体表示匹配战斗单元标准并且数量满足要求");
                
                var qd = document.getElementById(k);
                qd.style.color="yellow";
                
                document.getElementById("qd"+k).value = b;
            }

            if(a == aa && parseInt(b)>parseInt(bb)){
                console.log("蓝色字体表示在战斗单元配置中但是框定的范围里面没有该装备");
                var qd = document.getElementById(k);
                qd.style.color="blue";
                
                document.getElementById("qd"+k).value = b;
            }

            aa=""; bb="";
        }

        a=""; b="";
    }

}

以上是关于js比对两个table的tbody的数据，一个字段是否有相同的，或其他的主要内容，如果未能解决你的问题，请参考以下文章

求助，怎么通过js获取slickgrid表格中的行数，选中行和一行中的数据

JQueryUI可排序的thead和tbody在拖动隐藏两个字段的行时缩小