快捷導(dǎo)航

JScript實現(xiàn)表格的簡單操作

更新時間：2017年08月15日 09:30:04 作者：顧白的顧小白

這篇文章主要為大家詳細(xì)介紹了JScript實現(xiàn)簡單的表格操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JScript實現(xiàn)表格的簡單操作，供大家參考，具體內(nèi)容如下

實現(xiàn)思路：

1、添加時：獲取當(dāng)前列表的行數(shù)，在當(dāng)前一行添加下一行；
2、用insertCell()方法添加一行，下標(biāo)從0開始，
3、若要給新一行添加類型、響應(yīng)事件，就用setAttribute（）方法，類似于鍵值對，并用appendChild（）方法將數(shù)據(jù)保存到新一行
4、刪除時：獲取需要刪除行的當(dāng)前行數(shù)this，然后獲取父節(jié)點(diǎn)，把整一行刪掉remove（），而不是單單刪除某一行的單個數(shù)據(jù)
5、修改時：獲取當(dāng)前修改行的行數(shù)索引，點(diǎn)擊修改時，把表格狀態(tài)轉(zhuǎn)換為文本格式，并把“修改”改為“確定”

實現(xiàn)代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="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;//表格行數(shù)
        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("輸入數(shù)量","");

        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");//創(chuàng)建按鈕
        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();//根據(jù)節(jié)點(diǎn)的層級關(guān)系刪除行
      }

      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+")");

        //修改數(shù)量
        var cellNumer = table.rows[index].cells[2];
        var txt = document.createElement("input"); //創(chuàng)建一個文本框
        txt.setAttribute("value",cellNumer.innerHTML);//設(shè)置文本框的值
        txt.setAttribute("size",5);//文本框長度
        cellNumer.innerHTML = "";//把單元格的數(shù)據(jù)清除
        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標(biāo)簽
        for(var i=0;i<item.length;i++){ //循環(huán)每一個
          if(item[i].type==ch.type){ //判斷每一個標(biāo)簽的類型是否為CheckBox
            item[i].checked = ch.checked; //復(fù)選框的選中與全選的復(fù)選框選中相同
          }
        }

      }
      function seclect(sh){
        var item = document.getElementsByName("sel"); 
        var all = document.getElementById("all");
        var tag = true;
        for(var i=0;i<item.length;i++){//判斷是否全部選中
          if(item[i].checked == false){
            tag = false;
            break;
          }
        }
        all.checked = tag;
      }
    </script>
  </head>
  <body>
    <center>
      <table id="order" >
        <tr>
          <th>
            <input type="checkbox" onclick="allSelect(this)" id="all"/>全選
          </th>
            <th>商品名稱</th>
            <th>數(shù)量</th>
            <th>單價</th>
            <th>操作</th>
          </tr>
        <tr>
          <td><input type="checkbox" onclick="seclect(this)" name="sel"/></td>
          <td>娃哈哈</td>
          <td>10</td>
          <td>2</td>
          <td><input value="刪除" type="button" onclick="del(this)"style="margin-right:5px ;"/><input value="修改" type="button" onclick="update(1)"/></td>
        </tr>

      </table>
      <button onclick="add()">添加商品</button>
    </center>
  </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: