zoukankan      html  css  js  c++  java
  • 关于html中利用jQuery选择子节点方法总结——待续

      好几次碰到类似的要求,每次用的都不一样,在之前的面试的时候就被问到,突然觉得虽然自己做过但是说不出头绪,只能回答什么parent(),next()等等。所以想整理一下。

      1、需求一:同页面有两个表格,想左右互相移动(仅涉及页面测试,不考虑其他,我当时想到的就是利用选择节点更改,当然可能有其他方法,可以探讨)页面截图:

      上图就就是两边可以随意互相转换,当时我的方法是这个是左右转换的按钮

        <td width="5%">
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <p><button class="btn btn-primary" type="submit"
                                    onClick="moveToRight();">&gt;&gt;&gt;</button></p>
                                </td>
                                <td width="5%" style="text-align: right;">
                                    <p>&nbsp;&nbsp;&nbsp;</p>
                                        <p><button class="btn btn-primary" type="submit"
                                    onClick="moveToLeft();">&lt;&lt;&lt;</button></p>
                                
                                    
                                </td>

    调用的方法JavaScript为:

    function moveToRight(){    
        
        var leftlength=$("#lefttable tr").size();
                for(var i=0;i<leftlength;i++){            
                    if($("#lefttable tr").eq(i).find("td:eq(0) [name='checkbox']").is(':checked')){
                    $str='';
                    $str+='<tr>'
                    $str+=$("#lefttable tr").eq(i).html();
                    $str+='<td style="text-align: center;"><input type="text" class="" value="2015-01-01"></td>'
                    $str+='<td style="text-align: center;"><input type="text" class="" value="2015-01-01"></td>'
                    $str+='</tr>'
                    $("#rightTable").append($str);
                    $("#lefttable tr").eq(i).remove();
                    leftlength=$("#lefttable tr").size();
                    i=-1;
                    }                
                }
            }
            
            function moveToLeft(){
                var rightlength=$("#rightTable tr").size();
            
                for(var i=0;i<rightlength;i++){
                    if($("#rightTable tr").eq(i).find("td:eq(0) [name='checkbox']").is(':checked')){
                    $str='';
                    $str+='<tr>'
                    $str+=$("#rightTable tr").eq(i).find("td:eq(0)").prop("outerHTML");
                    $str+=$("#rightTable tr").eq(i).find("td:eq(1)").prop("outerHTML");
                    $str+=$("#rightTable tr").eq(i).find("td:eq(2)").prop("outerHTML");
                    $str+='</tr>'
                    $("#lefttable").append($str);                
                    $("#rightTable tr").eq(i).remove();
                    rightlength=$("#rightTable tr").size();
                    i=-1;
                    }                
                }
            }

    当时遇到的两个问题是怎么获取到对应的节点和怎么把选择到的节点全部已到另一个表格里面所以用到了eq(i) 和prop("outerHTML");

    总结:自己悟。。。呵呵,还没有写完,回头有时间再写

    未完待续。。

  • 相关阅读:
    自动化测试之读取配置文件 | 踩坑指南
    文未有福利 | BAT 名企大厂做接口自动化如何高效使用 Requests ?
    高效能 Tester 必会的 Python 测试框架技巧
    移动自动化测试从入门到高级实战
    1 天,1000+ 测试工程师分享了这个课程 | 年度福利
    H5性能分析实战来啦~
    接口测试实战 | Android 高版本无法抓取 HTTPS,怎么办?
    实战 | 接口自动化测试框架开发(Pytest+Allure+AIOHTTP+用例自动生成)
    第一期线上沙龙PPT领取方式
    Java日志第48天 2020.8.24
  • 原文地址:https://www.cnblogs.com/minzhousblogs/p/5645909.html
Copyright © 2011-2022 走看看