利用JScript实现简单的表格操作

最新推荐文章于 2022-03-31 11:11:12 发布

顾白的顾小白

最新推荐文章于 2022-03-31 11:11:12 发布

阅读量290

点赞数

分类专栏： JScript Java 文章标签： JScript

本文链接：https://blog.csdn.net/lhf294/article/details/77071729

版权

Java 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JScript

3 篇文章 0 订阅

订阅专栏

/*思路：
        1、添加时：获取当前列表的行数，在当前一行添加下一行；
        2、用insertCell()方法添加一行，下标从0开始，
        3、若要给新一行添加类型、响应事件，就用setAttribute（）方法，类似于键值对，并用appendChild（）方法将数据保存到新一行
        4、删除时：获取需要删除行的当前行数this，然后获取父节点，把整一行删掉remove（），而不是单单删除某一行的单个数据
        5、修改时：获取当前修改行的行数索引，点击修改时，把表格状态转换为文本格式，并把“修改”改为“确定”*/
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;
                width: 400px;
            }
            td,th{
                border-right:1px solid #ccc ;
                border-bottom: 1px solid #ccc;
            }
        </style>
        <script>
            function add(){
                var table = document.getElementById("order");
                var index = table.rows.length;//表格行数
                var  row = table.insertRow(index);//插入一个行并返回新一行


                var c0 = row.insertCell(0);
                var b0 = document.createElement("input");
                b0.setAttribute("type","checkbox");
                b0.setAttribute("onclick","seclect("+index+")");
                b0.setAttribute("name","sel");
                c0.appendChild(b0);

                var c1 = row.insertCell(1);//在新一行插入一列，并返回新一列
                c1.innerHTML = prompt("请输入商品名称","");

                var c2 = row.insertCell(2);//在新一行插入一列，并返回新一列
                c2.innerHTML = prompt("输入数量","");

                var c3 = row.insertCell(3);//在新一行插入一列，并返回新一列
                c3.innerHTML = prompt("输入价格","");

                var c4 = row.insertCell(4);
                var b1 = document.createElement("input");
                b1.setAttribute("type","button");
                b1.setAttribute("value","删除");
                b1.setAttribute("onclick","del(this)");

                var b2 = document.createElement("input");//创建按钮
                b2.setAttribute("type","button");
                b2.setAttribute("value","修改");
                b2.setAttribute("style","margin-left: 5px");
                b2.setAttribute("onclick","update("+index+")");

                c4.appendChild(b1);//把按钮添加到操作的单元格中
                c4.appendChild(b2);
            }

            function del(but){
                //var table = document.getElementById("order");
                but.parentNode.parentNode.remove();//根据节点的层级关系删除行
            }

            function update(index){
                var table = document.getElementById("order");
                //获得修改按钮
                var cell=table.rows[index].cells[4];

                cell.lastChild.setAttribute("value","确定");
                //为按钮重新绑定事件
                cell.lastChild.setAttribute("onclick","edit("+index+")");

                //修改数量
                var cellNumer = table.rows[index].cells[2];
                var txt = document.createElement("input"); //创建一个文本框
                txt.setAttribute("value",cellNumer.innerHTML);//设置文本框的值
                txt.setAttribute("size",5);//文本框长度
                cellNumer.innerHTML = "";//把单元格的数据清除
                cellNumer.appendChild(txt); //把文本框加入到单元格
            }

            function edit(index){
                var table = document.getElementById("order");

                var cell = table.rows[index].cells[4];

                cell.lastChild.setAttribute("value","修改");
                cell.lastChild.setAttribute("onclick","update("+index+")");

                //把单元格中的文本框删除
                var cellNumer = table.rows[index].cells[2];
                var num = cellNumer.firstChild.value;//取文本框的值
                cellNumer.removeChild(cellNumer.firstChild);//删除文本框
                cellNumer.innerHTML = num;
            }

            function allSelect(ch){
                var item = document.getElementsByTagName("input"); //取所有的input标签
                for(var  i=0;i<item.length;i++){ //循环每一个
                    if(item[i].type==ch.type){ //判断每一个标签的类型是否为CheckBox
                        item[i].checked = ch.checked; //复选框的选中与全选的复选框选中相同
                    }
                }

            }
            function seclect(sh){
                var item = document.getElementsByName("sel"); 
                var all  = document.getElementById("all");
                var tag = true;
                for(var  i=0;i<item.length;i++){//判断是否全部选中
                    if(item[i].checked == false){
                        tag = false;
                        break;
                    }
                }
                all.checked = tag;
            }
        </script>
    </head>
    <body>
        <center>
            <table id="order" >
                <tr>
                    <th>
                        <input type="checkbox" onclick="allSelect(this)" id="all"/>全选
                    </th>
                        <th>商品名称</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>操作</th>
                    </tr>
                <tr>
                    <td><input type="checkbox" onclick="seclect(this)" name="sel"/></td>
                    <td>娃哈哈</td>
                    <td>10</td>
                    <td>2</td>
                    <td><input value="删除" type="button" onclick="del(this)"style="margin-right:5px ;"/><input value="修改" type="button" onclick="update(1)"/></td>
                </tr>

            </table>
            <button  onclick="add()">添加商品</button>
        </center>
    </body>
</html>

顾白的顾小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用JScript实现简单的表格操作

/*思路： 1、添加时：获取当前列表的行数，在当前一行添加下一行； 2、用insertCell()方法添加一行，下标从0开始， 3、若要给新一行添加类型、响应事件，就用setAttribute（）方法，类似于键值对，并用appendChild（）方法将数据保存到新一行 4、删除时：获取需要删除行的当前行数this，然后获取父节点，把整一
复制链接

扫一扫

专栏目录