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

本文链接：https://blog.csdn.net/Fickle_actor/article/details/77073146
本文将介绍如何使用JavaScript轻松地处理表单数据，包括添加、删除单个和多个条目，更新信息，以及实现全选功能。通过实例代码，帮助你理解这些操作的核心逻辑。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>