Simple implementation of information entry function with js

1. Target style

After clicking Add, the added content will be added to the table below, and then click Modify to modify the content inside, and click Save to save the value in the input box

 

 2. Analysis

Idea: Click the Add button:

        1. Get the input content of the input box

        2. Add rows, and then create cells according to the number of input boxes

        3. Give the value of the input to the innerHTML of the cell content

        4. Create one more cell to place the delete button

 Idea: Click the Modify button:

        1. Turn the text of the cell into an input box

        2. Give the value of the input to the content innerHTML of the cell

        3. Judge the current button state, modify the click button to save, and then click the button to modify

        4. Click the delete button to delete the last row

3. Code implementation

1. HTML part

 <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 part

Get all tags first:

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

Click the Add button:

 //点击添加按钮：
        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>

Click the Modify button section and delete section:

 //点击修改按钮：
            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();
            }