js-Operationsformular-js-Tutorial-php.cn

js-Operationsformular

php中世界最好的语言

Freigeben： 2018-04-19 10:10:06

Original

2050 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen ein js-Operationsformular. Was sind die Vorsichtsmaßnahmen für das js-Operationsformular?

Umsetzungsideen:

1. Beim Hinzufügen: Ermitteln Sie die Anzahl der Zeilen in der aktuellen Liste und fügen Sie die nächste Zeile zur aktuellen Zeile hinzu
2. Verwenden Sie die Methode insertCell(), um eine Zeile hinzuzufügen, wobei der Index bei 0 beginnt.
; 3. Um einer neuen Zeile einen Typ hinzuzufügen und auf Ereignisse zu reagieren, verwenden Sie die Methode setAttribute(), ähnlich einem Schlüssel-Wert-Paar, und verwenden Sie die Methode appendChild(), um die Daten in einer neuen Zeile zu speichern
4 . Beim Löschen: Ermitteln Sie die aktuelle Anzahl der zu löschenden Zeilen und rufen Sie dann den übergeordneten Knoten ab. Löschen Sie die gesamte Zeile mit „remove()“, anstatt nur ein einzelnes Datenelement in einer Zeile zu löschen.
5. Wann Ändern: Rufen Sie den Zeilennummernindex der aktuell geänderten Zeile ab. Wenn Sie zum Ändern klicken, konvertieren Sie den Tabellenstatus in das Textformat und „Ändern“ wird in „OK“ geändert

Implementierungscode:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Implementierung des Bildkarussells auf mobilen Endgeräten

Detaillierte Erläuterung der Verwendung von Vue-Scope-Slots

Das obige ist der detaillierte Inhalt vonjs-Operationsformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!