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

来源：互联网发布：阿里云专有网络配置编辑：程序博客网时间：2024/06/04 17:44
/*思路：        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 0