027 奥展项目涉及的javascipt知识点笔记

1.获取指定div标签内的所有input标签

let inputs = document.getElementById("inspect-part1").getElementsByTagName("input");

2.获取input标签的内容

inputs[i].value

案例：

3.jQuery实现在一个输入框按回车键后光标跳到下一个输入框

//jQuery实现在一个输入框按回车键后光标跳到下一个输入框
    function focusNextInput(thisInput)
    {
        let inputs = document.getElementById("inspect-part1").getElementsByTagName("input");
        for(var i = 0;i<inputs.length;i++){
            // 如果是最后一个，则焦点回到第一个(如果想实现按顺序可以登陆，可以写入登陆方法)
            if(i==(inputs.length-1)){
                inputs[0].focus(); break;
            }else if(thisInput == inputs[i]){
                inputs[i+1].focus(); break;
            }
        }

    }

4.获取指定div标签内的所有input标签,并获取span标签的内容

let spans = document.getElementById("inspect-part1").getElementsByTagName("span");
spans[0].innerHTML

案例：

5.js中分割字符串成数组

let strTest="12.55-12.60";
strTest.split('-')

效果图：

6.字符串转float数值

parseFloat("12.55")

案例：

7.字符串截取

(1)截取字符串的后4位

let str1="abcdefghhhh";
str1.substring(str1.length-4)

案例：

(2)获取除了后四位的剩余字符串

8.忽略大小写，判断字符串相等

"MAx".toLowerCase==="max".toLowerCase

案例：

9.span标签赋值及修改span字体颜色

 

let spans = document.getElementById("inspect-part1").getElementsByTagName("span");
spans[1].innerHTML="不合格";
spans[1].style.color="red";

 

案例：

 10.清空id为tab-common的div标签下的所有input标签的内容

//清空id为tab-common的div标签下的所有input标签的内容
                let inputs = document.getElementById("tab-common").getElementsByTagName("input");
                for (let i = 0; i <inputs.length ; i++) {
                    inputs[i].value="";
                }

 11.js控制li标签隐藏

 

        let i=3;
        let lis = document.getElementById("charts-chartjs"+i);
        lis.setAttribute("hidden",true);    

 

12.js获取表格中当前行的指定列的值

html代码：

 

　　　　　　　　　　　　　　　　　　 <tr v-for="item in laliRecordList">
                                    <td>
                                        <button type="button" class="btn bg-olive btn-xs" onclick="modifyDataByid(this)">修改</button>
                                    </td>
                                    <td>{{item.id}}</td>
                                    <td>{{item.testdate}}</td>
                                    <td>{{item.songjiandepart}}</td>
                                    <td>{{item.songjianren}}</td>
                                    <td>{{item.orderid}}</td>
                                    <td>{{item.customer}}</td>
                                    <td>{{item.material}}</td>
                                </tr>

 

js代码：

<script>
    function modifyDataByid(obj){
        var $td = $(obj).parents('tr').children('td');
        var id = $td.eq(1).text();
        console.log(id)

    };
</script>

注意：该方法不能放到vue中。