Home > Article > Web Front-end > js operation form

js operation form

php中世界最好的语言Original: 2018-04-19 10:10:061996browse

This time I will bring you js operation form. What are the precautions for js operation form? Here is a practical case, let’s take a look.

Implementation ideas:

1. When adding: Get the number of rows in the current list and add the next row to the current row;
2. Use the insertCell() method to add a row, and the subscript starts from 0.
3. If you want to add a type to a new row . To respond to events, use the setAttribute() method, similar to a key-value pair, and use the appendChild() method to save the data to a new row
4. When deleting: Get the current number of rows to be deleted, this, and then get the parent node , delete the entire row remove(), instead of just deleting a single data of a certain row
5. When modifying: Get the row number index of the currently modified row. When clicking modify, convert the table status to text format, and Change "Modify" to "Confirm"

Implementation code:

<!DOCTYPE html>
<html>
  <head>
    <metacharset="UTF-8">
    <title></title>
    <style>
      table{
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        width: 400px;
      }
      td,th{
        border-right:1px solid #ccc ;
        border-bottom: 1px solid #ccc;
      }
    </style>
    <script>
      function add(){
        var table = document.getElementById("order");
        var index = table.rows.length;//表格行数
        var row = table.insertRow(index);//插入一个行并返回新一行
 
 
        var c0 = row.insertCell(0);
        var b0 = document.createElement("input");
        b0.setAttribute("type","checkbox");
        b0.setAttribute("onclick","seclect("+index+")");
        b0.setAttribute("name","sel");
        c0.appendChild(b0);
 
        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","del(this)");
 
        var b2 = document.createElement("input");//创建按钮
        b2.setAttribute("type","button");
        b2.setAttribute("value","修改");
        b2.setAttribute("style","margin-left: 5px");
        b2.setAttribute("onclick","update("+index+")");
 
        c4.appendChild(b1);//把按钮添加到操作的单元格中
        c4.appendChild(b2);
      }
 
      function del(but){
        //var table = document.getElementById("order");
        but.parentNode.parentNode.remove();//根据节点的层级关系删除行
      }
 
      function update(index){
        var table = document.getElementById("order");
        //获得修改按钮
        var cell=table.rows[index].cells[4];
 
        cell.lastChild.setAttribute("value","确定");
        //为按钮重新绑定事件
        cell.lastChild.setAttribute("onclick","edit("+index+")");
 
        //修改数量
        var cellNumer = table.rows[index].cells[2];
        var txt = document.createElement("input"); //创建一个文本框
        txt.setAttribute("value",cellNumer.innerHTML);//设置文本框的值
        txt.setAttribute("size",5);//文本框长度
        cellNumer.innerHTML = "";//把单元格的数据清除
        cellNumer.appendChild(txt); //把文本框加入到单元格
      }
 
      function edit(index){
        var table = document.getElementById("order");
 
        var cell = table.rows[index].cells[4];
 
        cell.lastChild.setAttribute("value","修改");
        cell.lastChild.setAttribute("onclick","update("+index+")");
 
        //把单元格中的文本框删除
        var cellNumer = table.rows[index].cells[2];
        var num = cellNumer.firstChild.value;//取文本框的值
        cellNumer.removeChild(cellNumer.firstChild);//删除文本框
        cellNumer.innerHTML = num;
      }
 
      function allSelect(ch){
        var item = document.getElementsByTagName("input"); //取所有的input标签
        for(var i=0;i<item.length;i++){ //循环每一个
          if(item[i].type==ch.type){ //判断每一个标签的类型是否为CheckBox
            item[i].checked= ch.checked; //复选框的选中与全选的复选框选中相同
          }
        }
      }
      function seclect(sh){
        varitem=document.getElementsByName("sel");
        varall=document.getElementById("all");
        vartag=true;
        for(vari=0;i<item.length;i++){//判断是否全部选中
          if(item[i].checked == false){
            tag=false;
            break;
          }
        }
        all.checked=tag;
      }
    </script>
  </head>
  <body>
    <center>
      <tableid="order">
        <tr>
          <th>
            <inputtype="checkbox"onclick="allSelect(this)"id="all"/>全选
          </th>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>操作</th>
          </tr>
        <tr>
          <td><inputtype="checkbox"onclick="seclect(this)"name="sel"/></td>
          <td>娃哈哈</td>
          <td>10</td>
          <td>2</td>
          <td><inputvalue="删除"type="button"onclick="del(this)"style="margin-right:5px ;"/><inputvalue="修改"type="button"onclick="update(1)"/></td>
        </tr>
 
      </table>
      <buttononclick="add()">添加商品</button>
    </center>
  </body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

js operation form

Related articles