Day25 - 資料儲存與更新(02) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 25

自我挑戰組

JavaScript 新手筆記系列第 25 篇

Day25 - 資料儲存與更新(02)

11th鐵人賽 javascript

hokou

2019-10-10 23:11:12

1155 瀏覽

分享至

前言

利用自訂 data 屬性以及 array 來動態增加資料

data 屬性

HTML 可自訂 data- 屬性，開頭以 data- 開始，後面名稱可自行定義，如 data-nom
在 JS 上利用 dataset.名稱 來搜尋值

index.html

<body>
    <div>
        <ul class="list">
            <li data-num="1" class="listli"></li>
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

var ele = document.querySelector(".listli");

ele.addEventListener('click',function(e){
    console.log(e.target.dataset.num);
});
// 點擊網頁上的 li 後顯示 1

array

在每個事件都增加監聽比較耗資源，因此會在父元件上增加，搭配可以自行定義的 data- ，以及利用 array 和迴圈來動態增加資料
刪減 array 內的資料則使用 splice(var1 , var2)，代表從第 var1 個開始，刪除 var2 個
從下面例子可以發現 HTML 內容只有一個 ul ，沒有 li ，主要就是靠 JS 的部分來動態新增甚至刪除

index.html

<body>
    <div>
        <ul class="list">
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

var data = [
    {
    Site: "崙背",
    county: "雲林縣",
    PM25: "51",
    },
    {
    Site: "富貴角",
    county: "新北市",
    PM25: "7",
    },
    {
    Site: "麥寮",
    county: "雲林縣",
    PM25: "30",
    }
]

var list = document.querySelector('.list');

// 更新 data
function updateList(){
var str = '';
var len = data.length;
for(var i = 0 ; i<len ; i++){
    str+='<li data-num="'+i+'">'+'<a href="#"> x </a>'+data[i].county+'的'+data[i].Site+'</li>'
}
// 為了在網頁顯示
// <li data-num="i"><a href="#"> x </a> 第 i county 的 Site </li>
// str+= 是因為要累加，以此例來說有3筆，因此最終會在父元件 ul 下新增 3筆 li 
list.innerHTML = str;
}

updateList();
// 將物件內的資料更新至列表

更新後顯示如下

// 確認點擊後顯示PM2.5值
function checkList(e){
var num = e.target.dataset.num;
console.log(e.target.nodeName);
if(e.target.nodeName !== 'LI'){return};
// 若點到 li 連結才繼續執行
alert('你點擊所在位置的PM2.5為'+data[num].PM25)
// 彈跳視窗顯示 PM2.5值
};

list.addEventListener('click',checkList,false);

點擊會跳出視窗

// 如果點擊 a 連結，則將資料刪除
function delList(e){
var num = e.target.dataset.num;
if(e.target.nodeName !== 'A'){return};
// 若點到 a 連結才繼續執行
data.splice(num,1);
updateList();
// 刪除後並更新列表
}
list.addEventListener('click',delList,false);