<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    js實現簡單的表格增刪效果的方法介紹

    發布時間:2020-03-27 14:15:05 來源:億速云 閱讀:177 作者:小新 欄目:web開發

    今天小編給大家分享的是js實現簡單的表格增刪效果的方法介紹,很多人都不太了解,今天小編為了讓大家更加了解js如何實現表格增刪效果,所以給大家總結了以下內容,一起往下看吧。一定會有所收獲的哦。

    js實現簡單的表格增刪效果的方法介紹

    先來看一下效果:

    js實現簡單的表格增刪效果的方法介紹

    js實現:

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>Title</title>
    </head>
    <!--4、編號:文本框
    書名:文本框
    作者:文本框
    出版社:文本框
    添加按鈕
    表格
    編號 書名 作者 出版社 刪除-->
    </head>
     <body>
     <div id="all">
     <p>編    號:<input type="text"></p>
     <p>書    名:<input type="text"></p>
     <p>作    者:<input type="text"></p>
     <p>出版社 :<input type="text"></p>
     <p>            
      <input type="button" value="添加" id="tj">
           
      <input type="button" value="清除" id="cle">
     </p>
     </div>
     <script>
     
     var ins,tj,qc,tab,all;
     var bookData=["編號","書名","作者","出版社","刪除"];
     init();
     
     function init() {
      all=document.getElementById("all");
      ins=document.getElementsByClassName("in");
      tj=document.getElementById("tj");
      qc=document.getElementById("cle");
      del=document.getElementById("del");
     
      tj.addEventListener("click",clickHandler);
      qc.addEventListener("click",clickQcHandler);
      creatTable();
     }
     
     
     function creatTable() {
      tab = $c("table", all, {
      width:"500px",
      borderCollapse:"collapse"
      });
      for (var i = 0; i < ins.length+1; i++) {//購物車表單數據賦值
      var th = $c("th", tab, {
       textAlign: "center",
       border: "1px solid #000000"
      });
      th.textContent=bookData[i];
      }
     }
     
     function clickHandler() {
      var tr = $c("tr", tab, {
      textAlign: "center",
      border: "1px solid #000000"
      });
      for (var i = 0; i < ins.length+1; i++) {//購物車表單數據賦值
      var td = $c("td", tr, {//列的創建
      textAlign: "center",
       border: "1px solid #000000"
      });
      if(i<ins.length){
       td.textContent = ins[i].value;
      }
      else if(i==ins.length){
       var del=$c("button", td);
       del.textContent="刪除";
       del.addEventListener("click",clickDelHandler);
      }
      }
     }
     
     function clickDelHandler(e) {//刪除 一行
      this.parentNode.parentNode.remove();
     }
     
     function clickQcHandler(e) {//清除 全部
      tab.remove();
      creatTable();
     }
     
     function $c(type,parent,style) {
      var elem=document.createElement(type);
      if(parent) parent.appendChild(elem);
      for(var key in style){
      elem.style[key]=style[key];
      }
      return elem;
     }
     
     </script>
     </body>
    </html>

    以上就是js實現簡單的表格增刪效果的方法的簡略介紹,當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多,歡迎關注億速云行業資訊頻道哦!

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2