用js简单实现信息录入功能

一、目标样式

在点击添加之后，会把添加的内容添加到下面的表格里面 ，然后点击修改，可以修改里面的内容，点击保存就会保存输入框里面的值

 

 二、分析

思路：点击添加按钮：

        1、拿到input框的输入内容

        2、添加行，再根据输入框的个数创建单元格

        3、将input的value值拿给单元格的内容innerHTML

        4、多创建一个单元格放置删改按钮

 思路：点击修改按钮：

        1、将单元格的文本变成输入框

        2、将input的value值拿给单元格的内容innerHTML

        3、判断当前按钮状态，修改点击按钮则变成保存，再点击按钮变成修改

        4、点击删除按钮，将最后一行删除

三、代码实现

1、html部分

 <style>
        * {
            margin: auto;
        }

        div {
            width: 300px;
            margin-bottom: 50px;
            text-align: center;
        }
    </style>
 <div>
        姓名：<input type="text"><br>
        学号：<input type="text"><br>
        年龄：<input type="text"><br>
        性别：<input type="text"><br>
        学历：<input type="text"><br>
        <button class="add">添加</button>
    </div>
    <table border="1px" width="800px" style="text-align: center;" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
            <th>性别</th>
            <th>学历</th>
            <th>删改</th>
        </tr>

    </table>

2、js部分

先获取所有标签：

<script>
let buts = document.querySelector(".add");//拿到添加按钮
let input1 = document.querySelectorAll("input");//拿到所有的input输入框
let tab = document.querySelector("table");//拿到表格信息

点击添加按钮：

 //点击添加按钮：
        buts.onclick = function () {
            //创建行和单元格
            let trs = document.createElement("tr");//添加行
            tab.appendChild(trs)//将行添加到表格中
            for (let i = 0; i < input1.length; i++) {//拿每一个输入框的值 
                let tds = document.createElement("td");//添加单元格
                tds.innerHTML = input1[i].value;//将每一个输入框的值赋值到单元格中
                input1[i].value="";//清空输入框的值
                trs.appendChild(tds);//将单元格添加到行中
            }
            //多创建一个单元格放按钮
            let newtd = document.createElement("td");//创建单元格
            trs.appendChild(newtd);//将新创建的单元格添加到行中
            //创建新的修改/删除按钮
            let myUndate = document.createElement("button");
            myUndate.innerHTML = "修改";
            newtd.appendChild(myUndate);//将修改按钮放到新创建的单元格里
            let myDelet = document.createElement("button");
            myDelet.innerHTML = "删除";
            newtd.appendChild(myDelet);//将删除按钮放到新创建的单元格里

//这里还有点击修改和删除的按钮代码
}
  </script>

点击修改按钮部分和删除部分：

 //点击修改按钮：
            myUndate.onclick = function () {
                let sontable=this.parentElement.parentElement.children;//每一个单元格
                if (myUndate.innerHTML == "修改") {
                    myUndate.innerHTML = "保存";
                    for(let j=0;j<sontable.length-1;j++){
                        sontable[j].innerHTML=`<input type="text" value="${sontable[j].innerHTML}">`;//单元格里面的内容变成输入框，且文本内容为输入框的value值
                    }
                } else {
                    myUndate.innerHTML = "修改";
                    for(let j=0;j<sontable.length-1;j++){
                        sontable[j].innerHTML=sontable[j].children[0].value; //单元格里面的子元素(input输入框 )的value值赋给单元格文本内容             
                    }   
                }
            }

//点击删除按钮
            myDelet.onclick = function () {
                trs.remove();
            }