JS表格小案例
阿新 • • 發佈：2018-12-28
建立一個表單，根據表單填寫內容，建立表格行內容，每行後面有刪除按鈕，刪除後可以刪除該行一個搜尋文字框，輸入內容，點選按鈕顯示當前模糊查詢到所有內容，顯示在表格內
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { width: 800px; border: 1px solid lightcoral; border-collapse: collapse; } </style> </head> <body> <input type="text" id="search" placeholder="search" /> <input type="button" value="搜尋" id="find" /> <input type="text" id="name" placeholder="name" /> <input type="text" id="psd" placeholder="password" /> <input type="text" id="num" placeholder="number" /> <input type="button" value="提交" id="send" onclick="add()" /> <table id="tab"> </table> <script type="text/javascript"> // 通過ID獲取所有元素 var search = document.getElementById("search"); var find = document.getElementById("find"); var name1 = document.getElementById("name"); var psd1 = document.getElementById("psd"); var num1 = document.getElementById("num"); var send = document.getElementById("send"); var tab = document.getElementById("tab"); // 定義一個數組,用來存放所有的輸入的物件 var arr = []; function add() { // 判斷輸入是否為空 if (name1.value && psd1.value && num1.value) { // 定義物件存放輸入的屬性及屬性值 var obj = {}; // 建立每行的tr以及刪除鍵a var tr = document.createElement("tr"); var aa = document.createElement("a"); aa.textContent = "Del"; tab.appendChild(tr); // 向物件新增使用者輸入的屬性及屬性值 obj.name = name1.value; obj.psd = psd1.value; obj.num = num1.value; // 遍歷物件輸出到每行的tr for (var str in obj) { var td = document.createElement("td"); td.textContent = str + " : " + obj[str]; tr.appendChild(td); } tr.appendChild(aa); // 對刪除鍵新增點選事件 aa.addEventListener("click", del); // 建立點選事件,使tr刪除 function del(e) { e = e || window.event; tr.remove(); } // 每次執行後清空輸入內容 name1.value = psd1.value = num1.value = ""; // 將每次的物件放入陣列中 arr.push(obj); // console.log(arr); // 為搜尋鍵新增監聽事件 find.addEventListener("click", clickHandler); // 新建點選函式,遍歷陣列,查詢搜尋的關鍵字 function clickHandler(e) { e = e || window.event; var str = search.value; var data = arr.filter(function (t) { return t.name.indexOf(str) > -1; }); // 清空表格 tab.textContent = ""; //遍歷陣列物件 for (var j = 0; j < data.length; j++) { //新建每一行 var tr = document.createElement("tr"); var aa = document.createElement("a"); aa.textContent = "Del"; tab.appendChild(tr); //新建每行的每一項 for (var str in data[j]) { var td = document.createElement("td"); td.textContent = str + " : " + data[j][str]; tr.appendChild(td); } } } } else { alert("Error"); } } </script> </body> </html> 