js使用时一些注意事项

最新推荐文章于 2021-07-31 21:40:02 发布

其实我觉得你挺好的

最新推荐文章于 2021-07-31 21:40:02 发布

阅读量149

点赞数

分类专栏：前端 js 文章标签： js 注意事项

本文链接：https://blog.csdn.net/weixin_45408862/article/details/98889946

版权

前端同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

注意事项：
js是弱语言，面向对象的语言，一般不会执行，通过事件触发

怎么调试JS代码？
1.运行页面
2.快捷键发f12
3.弹出的页面找到调试器找到js代码
4.打断点
5.刷新页面
6.进入调试的时候，按f11单步执行

下面这个代码没有问题，为什么在界面上显示不出结果？
原因：因为html页面在加载的时候是根据代码的先后顺序加载的，所以会先加载js代码，再加载HTML，所以会出现HTML中的代码无法响应JS代码。通常情况下，我们最好把js代码放到html代码最后

<!DOCTYPE html><html lang="en">
<head>   
    <meta charset="UTF-8">   
    <title>时间</title>   
    <script type="text/javascript">       
        // 获取时间       
        var date = new Date();
        //alert(date);
        //把时间显示到页面上
        // document.write(date);       
        document.getElementById("time").innerHTML=date;   
    </script>
</head>
<body>
<div id="time"></div>


</body>
</html>

老师布置的作业，昨天按着老师的方法写了一个，今天自作聪明按自己思路（通过操作dom树节点进行修改和删除操作，删除操作可以，修改操作却不行）和方法写却干了一晚上，因为一个低级错误（导致我一晚上啥都没干，无语！！），知识点存在漏洞和偏见。
总结：当把节点作为参数传参的时候，就会失去与其DOM树其他节点的关联，传过去的是一个节点类型。所以没办法使用传节点的方法去修改行内单元格的数据。类似于java里面普通变量的传参，传过去的时值，并不是地址。所以没办法再操作原来的DOM树进行修改操作。可以使用传tr节点的属性id。通过id进行修改操作。
下面附上题目要求以及操蛋的代码：
本来还要丰富一下，比如全选，全不选，删除选中，取消选中，由于时间关系，就此作罢（毕竟以后干的是后端，还是多撸后端代码才是！前端看懂就行了）会在最后面附上昨天的代码，代码中实现了全选，全不选，删除选中，至于取消选中也很简单判断一下每一行的复选框的状态，为true改为false即可。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="">
        body{
            font-size:13px;
            line-height:25px;
        }
        table{
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            width:400px;
        }
        #table2{
            border-top: 0px solid #333;
        }
        td{
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            text-align:center;

        }
    </style>


</head>
<body>

<table border="0" cellspacing="0" cellpadding="0" id="table1">
    <tr>
        <td><input type="checkbox" name="check" id="tds">全选</td>
        <td>名字</td>
        <td>单价</td>
        <td>数量</td>
        <td>总金额</td>
        <td>按钮</td>
    </tr>
    <tr id="row1">
        <td><input type="checkbox" name="check"></td>
        <td>奥利奥</td>
        <td>5</td>
        <td>6</td>
        <td>30</td>
        <td><input type="button" onclick="delTr(this)" value="删除"><input type="button" onclick="updateTr('row1')" value="修改"></td>
    </tr>
</table >
<table border="0" cellspacing="0" cellpadding="0" id="table2">
    <tr>
        <td colspan="6"><button type="button" onclick="addRow()">增加</button></td>
    </tr>

</table>

<script type="text/javascript">
    //新增
    function addRow() {
        var table = document.getElementById("table1");
        var tr = document.createElement("tr");
        var row_index = table.rows.length;
        //为tr 添加ID
        var rowId = "row"+row_index;
        // alert(rowId);
        tr.setAttribute("id",rowId);
        tr.innerHTML="<td><input type=\"checkbox\" name=\"check\"></td>" +
            "<td>巧乐兹</td>" +
            "<td>5</td>" +
            "<td>6</td>" +
            "<td>30</td>" +
            "<td><input type=\"button\" onclick=\"delTr(this)\" value=\"删除\"><input type=\"button\" onclick=\"updateTr('row"+row_index+"')\" value=\"修改\"></td>"
        table.appendChild(tr);
    }
    //点击全选就全选，再次点击就取消
    document.getElementById("tds").onclick = function () {
        var cbs=document.getElementsByName("check");
        for (var i=0;i<cbs.length;i++){
            cbs[i].checked=this.checked;
        }
    }
    //删除行
    function  delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
    //修改
    function updateTr(id) {
        // alert(id);
        //获取一行所有单元格
        var row = document.getElementById(id).cells;

        // 根据所在行找到数量单元格，修改其值
        row[3].innerHTML="<input type=\"text\" style=\"width: 40px;\">";
        row[5].lastChild.value="确认";
        row[5].lastChild.setAttribute("onclick","upRow('"+id+ "')");
    }
    function upRow(id) {
        var row = document.getElementById(id).cells;
        var text = row[3].firstChild.value;
        // alert(text);
        row[3].innerHTML=text;

        row[4].innerHTML=row[2].innerText*row[3].innerText;
        // alert()
        row[5].lastChild.value="修改";
        // alert(row[5].lastChild);
        row[5].lastChild.setAttribute("onclick","updateTr('"+id+ "')");
    }


</script>
</body>
</html>

效果图

下面是昨天根据老师的思路写的一个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>修改订单</title>
    <style type="text/css">
        body{
            font-size:13px;
            line-height:25px;
        }
        table{
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            width:400px;
        }
        td{
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            text-align:center;
        }
        .title{
            font-weight:bold;
            background-color: #cccccc;
        }
        input text{
            width:100px;
        }

    </style>

</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
    <tr class="title">
        <td><input type="checkbox" value="choice" name="cb" id="firstcb"/></td>
        <td>商品名称</td>
        <td>数量</td>
        <td>价格</td>
        <td>操作</td>
    </tr>
    <tr id="del1">
        <td><input type="checkbox" value="choice" name="cb"/></td>
        <td>防滑真皮休闲鞋</td>
        <td>12</td>
        <td>&yen;568.50</td>
        <td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' />
            <input id="edit1" type="button" value="修改" onclick='editRow("del1")' /></td>
    </tr>
    <tr>
        <td colspan="5" style="height:30px;">
            <input name="choiceall" type="button" value="全选" onclick="seleteALL()"/>
            <input name="choicenot" type="button" value="全不选" onclick="seleteNot()"/>
            <input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
            <input name="delete" type="button" value="删除选中" onclick="deleteRow()"/>
        </td>

    </tr>
</table>
<script type="text/javascript">

    function addRow(){
        var addTable=document.getElementById("order");
        var row_index=addTable.rows.length-1;       //新插入行在表格中的位置
        var newRow=addTable.insertRow(row_index);  //插入新行
        newRow.id="row"+row_index;                 //设置新插入行的ID

        var col = newRow.insertCell(0);
        col.innerHTML="<input type=\'checkbox\' value=\'choice\' name=\'cb\'/>";

        var col1=newRow.insertCell(1);
        col1.innerHTML="抗疲劳神奇钛项圈";

        var col2=newRow.insertCell(2);
        col2.innerHTML=row_index;

        var col3=newRow.insertCell(3);
        col3.innerHTML="&yen;49.00";

        var col4=newRow.insertCell(4);
        col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" />&nbsp;<input id='edit"+row_index+"' type='button' value='修改' onclick=\"editRow('row"+row_index+ "')\" />";

    }

    function delRow(rowId){
        var row=document.getElementById(rowId).rowIndex;   //删除行所在表格中的位置
        document.getElementById("order").deleteRow(row);
    }

    function editRow(rowId){
        var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
        var col=document.getElementById(rowId).cells;
        var text=col[2].innerHTML;
        col[2].innerHTML="<input name='num"+row+"' style='width:40px;' type='text' value='"+text+"' />";
        col[4].lastChild.value="确定";
        col[4].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");

        /*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" />&nbsp;<input id='edit"+row+"' type='button' value='确定' onclick=\"upRow('"+rowId+ "')\" />"	*/
    }

    function upRow(rowId){
        var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置
        var col=document.getElementById(rowId).cells;
        var text=col[2].firstChild.value;
        col[2].innerHTML=text;

        col[4].lastChild.value="修改";
        col[4].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");


        /*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" />&nbsp;<input id='edit"+row+"' type='button' value='修改' onclick=\"editRow('"+rowId+ "')\" />"*/


    }
    //全选
    function seleteALL() {
        var cbs = document.getElementsByName("cb");
        for (var i=0;i < cbs.length;i++){
            cbs[i].checked = true;
        }

    }
    //全部选
    function seleteNot() {
        var cbs = document.getElementsByName("cb");
        for (var i=0;i < cbs.length;i++){
            cbs[i].checked = false;
        }

    }
    //第一个选中就全选中 取消就全取消
    // function firstSelete() {
    //     var firstcb = document.getElementById("firstcb");
    //     var cbs = document.getElementsByName("cb");
    //     for (var i = 0;i<cbs.length;i++) {
    //         cbs[i].checked=firstcb;
    //     }
    // }
    document.getElementById("firstcb").onclick = function(){
        //第一个cb点击
        //1.获取所有的checkbox
        var cbs = document.getElementsByName("cb");
        //获取第一个cb

        //2.遍历
        for (var i = 0; i < cbs.length; i++) {
            //3.设置每一个cb的状态和第一个cb的状态一样
            cbs[i].checked =  this.checked;
        }
    }
    //删除被选中的
    function deleteRow() {
        var cbs = document.getElementsByName("cb");
        // alert(cbs.length);
        for (var i = cbs.length-1;i>0; i++) {
           if (cbs[i].checked==true){
                cbs[i].parentNode.parentNode.parentNode.
                removeChild(cbs[i].parentNode.parentNode);
           }
        }

    }

</script>
</body>
</html>

效果图：
在这里插入图片描述

其实我觉得你挺好的

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js使用时一些注意事项

注意事项：js是弱语言，面向对象的语言，一般不会执行，通过事件触发怎么调试JS代码？1.运行页面2.快捷键发f123.弹出的页面找到调试器找到js代码4.打断点5.刷新页面6.进入调试的时候，按f11单步执行下面这个代码没有问题，为什么在界面上显示不出结果？原因：因为html页面在加载的时候是根据代码的先后顺序加载的，所以会先加载js代码，再加载HTML，所以会出现HTM...
复制链接

扫一扫