組件化的可編輯表格

設計思路對于可編輯表格，需要首先定義好數(shù)據(jù)結構和數(shù)據(jù)類型，包括每個單元格的數(shù)據(jù)類型、數(shù)據(jù)校驗規(guī)則以及默認值等。表格的樣式也應該好看，排版也應該具有不同的排版方式，如列數(shù)、行數(shù)、字體大小等等；樣式：表格應該具備較好的可視性，不同的行和單元格可能需要不同的顏色、字號和粗細等；數(shù)據(jù)格式化：如何將不同的數(shù)據(jù)類型在表格中進行展示 編輯功能： 對于可編輯表格，主要提供了三種編輯方式，即行內編輯、彈出層編輯和表格外編輯。其中行內編輯通常用于簡單文本或者數(shù)值編輯， 表格功能：可編輯表格應該支持多種常用的功能，比如最常見的增刪查改功能。

明白了我們的設計需求之后那么我們就可以通過css和html對表格的樣式以及框架進行搭建，完成基本表格后從后臺json數(shù)據(jù)通過Ajax請求獲取數(shù)據(jù)裝入表格中。然后在js代碼中對表格添加方法監(jiān)聽，通過js代碼設計了表格的刪除屬性，對總分進行了計算操作。同時需要對表格中數(shù)據(jù)輸入的格式添加正則表達式。

核心代碼

獲取json數(shù)據(jù)

使用 XMLHttpRequest 對象向“data2.json”文件發(fā)出異步 GET 請求的 JavaScript 代碼。當 XMLHttpRequest 對象的狀態(tài)發(fā)生變化時，將觸發(fā) onreadystatechange 事件處理程序。當 readyState 為 4 且狀態(tài)為 200 時，將 responseText 解析為 JSON，并將結果數(shù)據(jù)存儲在變量中。最后gethtml調用該函數(shù)以使用數(shù)據(jù)生成 HTML。

增刪數(shù)據(jù)

?

?

使用一個嵌套的 for 循環(huán)遍歷學生成績數(shù)據(jù)，提取每個學生的各科成績數(shù)據(jù)。對于每個學生的成績數(shù)據(jù)，代碼使用 Object.keys() 方法提取出對象屬性名，并在一個 for...in 循環(huán)中遍歷屬性名。對于每個屬性名，代碼從當前學生對象中提取出相應的屬性值，并將其添加到一個臨時的 HTML 字符串中，形成一個表格單元格。最后，生成的 HTML 字符串被插入到表格中。最后，代碼調用一些其他函數(shù)，如 totalScoreBar()、setAllScore()、setEditable() 和 updateScore()，用于生成總分欄、設置可編輯單元格、計算總分和更新表格數(shù)據(jù)等操作。最后，代碼設置一個標志變量 flag 為 false，如果標志變量為 true，則調用 actionBar() 方法生成操作欄。

定義了一個名為totalScoreBar()的函數(shù)，用于在學生成績表格的標題行和每一行末尾添加“總分”欄，以便計算每個學生的總分。它首先是創(chuàng)建一個表頭單元格元素?allscore，設置其文本內容為“總分”。將allscore添加到表格標題行（即第一行）的末尾。對于表格中的每一行，創(chuàng)建一個單元格元素score，并將其文本內容設置為0，表示該學生的總分初始值為0。將score添加到該行的末尾，并將其設置為可被計算總分的單元格，即為其添加屬性rname，并將其值設置為allgrade。

在表格的表頭添加“操作”這一列，并在每一行最后一個單元格內添加“刪除”按鈕。同時，調用了delRow()函數(shù)實現(xiàn)了對每一行的刪除操作。

定義一個名為 updateScore() 的函數(shù)，用于更新總成績。首先通過獲取所有行的元素（除表頭）來循環(huán)遍歷每一行。然后通過獲取當前行的所有 td 標簽中 class 屬性有值的元素和 rname 屬性的元素來分別獲取該行的成績和總成績標簽元素，計算出該行成績的總和，并將總成績顯示在對應的總成績標簽元素中。實現(xiàn)更新所有行總成績的功能。

?異步編程是指程序在運行過程中不會阻塞其他操作，而是通過回調函數(shù)、事件監(jiān)聽、Promise等機制來實現(xiàn)非阻塞式的操作。在這串代碼中當調用 readFileWithPromise(path) 時，返回一個 Promise 對象，它將異步讀取文件的結果進行封裝。該 Promise 對象可以通過 .then() 方法來訪問異步操作的成功結果，也可以通過 .catch() 方法來處理異步操作的失敗情況

Promise常用于以下幾個方面：異步編程：在異步編程中，Promise 用于處理異步操作的結果和狀態(tài)。通過 Promise，我們可以避免回調地獄問題，使代碼更清晰可讀，直觀易懂。發(fā)送 Ajax 請求：使用 Promise 可以發(fā)送 Ajax 請求，并根據(jù)請求結果來執(zhí)行相應的操作。這可以大大簡化與服務器之間的交互。處理定時器：Promise 可以與定時器一起使用，以解決異步事件的延遲執(zhí)行。例如，可以使用 Promise 進行延遲加載、輪詢或超時。處理數(shù)據(jù)緩存：Promise 可以實現(xiàn)數(shù)據(jù)的異步緩存，在需要時將數(shù)據(jù)從緩存中檢索出來。這對于稍后使用的數(shù)據(jù)進行有效的管理非常有幫助。錯誤處理：Promise 不僅可以返回異步操作的結果，而且還可以處理任何可能發(fā)生的錯誤。例如，在處理網絡請求時，可以使用 Promise 來捕獲和處理錯誤，以便更好地通知用戶失敗的原因。

async/await 它使異步代碼看起來像同步代碼：使用 async/await 可以讓我們編寫異步代碼的結構類似于同步代碼，讓異步操作更加易讀和易于維護。等待 Promise 對象執(zhí)行完成：在異步操作之前添加一個 await，表示需要等待該異步操作完成后才能執(zhí)行下一行代碼。這個特性非常有用，它可以方便地解決一些回調問題。