js 简单实现表单数据的增添，单项删改，多项删除，修改以及全选功能

来源：互联网发布：java web 进度条实现编辑：程序博客网时间：2024/05/16 14:20
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">//      添加商品函数        function add(){//          获取表单元素            var table = document.getElementById("order");//          以表单的行数为索引插入行            var index = table.rows.length;            var row = table.insertRow(index);//          在插入行中插入1列            var c0 = row.insertCell(0);//          创建复选框元素并设置该元素的属性            var c =document.createElement("input");            c.setAttribute("type","checkbox");            c.setAttribute("name","single");            c.setAttribute("onclick","selectc()");//          将创建好的复选框添加为插入列的最后一个子节点            c0.appendChild(c);//          在插入行中插入列并提示框输入值            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","update(" + index + ")");            var b2 = document.createElement("input");            b2.setAttribute("type","button");            b2.setAttribute("value","删除");            b2.setAttribute("onclick","del(this)");//          将按钮添加为插入列的子节点            c4.appendChild(b1);            c4.appendChild(b2);        }//      删除单个商品函数        function del(but){//      but参数为删除按钮节点,将删除按钮的父节点的父节点移除,//      即移除删除按钮所在的 <tr>标签及内容;            but.parentNode.parentNode.remove();//          判断全选框状态            allsn();        }//      删除已选商品函数        function dels(){            var item =document.getElementsByName("single");            alert(item.length);//           遍历表单，将选中的商品从最后一个开始移除            for(var i=item.length-1;i>=0;i--){                if(item[i].checked == true){                 item[i].parentNode.parentNode.remove();                }            }//          判断全选框状态            allsn();        }//      修改商品数量函数            function update(index){//          获取表单元素并获取表单的操作列            var table =document.getElementById("order");            var cell = table.rows[index].cells[4];  //          将修改按钮改为确定并将点击事件的函数改为exit()            cell.firstChild.setAttribute("value","确定");            cell.firstChild.setAttribute("onclick","exit(" + index + ")");//          获取商品数量列            var cellNumber =table.rows[index].cells[2];//          创建输入框,将该列中的值赋给输入框并将原来的值赋为空字符串            var tex = document.createElement("input");            tex.setAttribute("value",cellNumber.innerHTML)            tex.setAttribute("size",5);            cellNumber.innerHTML="";//          将输入框添加为该列的最后一个子节点            cellNumber.appendChild(tex);//          修改时将焦点放在输入框并选中内容            tex.focus();            tex.select();        }//       当修改完后点击确定按钮执行的函数        function exit(index){            //将确定按钮的变为修改按钮并将点击事件函数改为修改函数            var table =document.getElementById("order");            var cell=table.rows[index].cells[4];            cell.firstChild.setAttribute("value","修改");            cell.firstChild.setAttribute("onclick","update("+ index +")");//          将商品数量列中的输入框的值赋为该列的内容,并将输入框移除            var cellNumber =table.rows[index].cells[2];            var num = cellNumber.firstChild.value;            cellNumber.firstChild.remove();            cellNumber.innerHTML=num;        }//      全选函数        function allSelect(ch){//          获取所有input元素            var item =document.getElementsByTagName("input");//          遍历所有input元素,找到所有复选框,将让复选框的选中状态与全选复选框一致            for(var i=0;i<item.length;i++){                if(item[i].type == "checkbox"){                    item[i].checked =ch.checked;                }            }        }        //全选后，取消单个复选框的选中状态的同时取消全选状态        function selectc(){//          遍历所有复选框,当有复选框未被选中时,全选复选框不选中            var item =document.getElementsByName("single");            var alls = document.getElementById("alls");            var tag=true;            for(var i=0;i<item.length;i++){                if(item[i].checked == false){                   tag=false;                       break;                }            }            alls.checked=tag;        }        //当表单没有数据时全选框不选中        function allsn(){            var alls =document.getElementById("alls");            var item =document.getElementsByName("single");            if(item.length==0){                alls.checked=false;            }        }    </script>    </head>    <body onload="allsn()">        <table id="order" border="1">            <tr>                <td> <input type="checkbox" id="alls"  onclick="allSelect(this)" />全选</td>                <td>商品名称</td>                <td>商品数量</td>                <td>商品价格</td>                <td>操作</td>            </tr>        </table>        <input type="button" value="添加商品" onclick="add()" />        <input type="button" value="删除已选项" onclick="dels()" />    </body></html>
阅读全文
0 0