Implementación simple de la función de entrada de información con js

1. Estilo de destino

Después de hacer clic en Agregar, el contenido agregado se agregará a la tabla a continuación y luego haga clic en Modificar para modificar el contenido dentro y haga clic en Guardar para guardar el valor en el cuadro de entrada

 

 2. Análisis

Idea: Haga clic en el botón Agregar:

        1. Obtenga el contenido de entrada del cuadro de entrada

        2. Agregue filas y luego cree celdas de acuerdo con la cantidad de cuadros de entrada

        3. Dar el valor de la entrada al HTML interno del contenido de la celda

        4. Crea una celda más para colocar el botón de borrar

 Idea: Haga clic en el botón Modificar:

        1. Convierta el texto de la celda en un cuadro de entrada

        2. Dar el valor de la entrada al contenido HTML interno de la celda

        3. Juzgue el estado actual del botón, modifique el botón de clic para guardar y luego haga clic en el botón para modificar

        4. Haga clic en el botón Eliminar para eliminar la última fila

3. Implementación del código

1. Parte 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 parte

Obtener todas las etiquetas primero:

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

Haga clic en el botón Agregar:

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

Haga clic en la sección del botón Modificar y elimine la sección:

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