js中的dataset问题-IFE前端学院任务16的笔记
百度IFE前端学院任务16的笔记
任务描述
参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
<script src="task.js"></script>
</head>
<body>
<div>
<label>城市名称：<input id="aqi-city-input" type="text"></label><br>
<label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">确认添加</button>
</div>
<table id="aqi-table">
<!--
<tr>
<td>城市</td><td>空气质量</td><td>操作</td>
</tr>
<tr>
<td>北京</td><td>90</td><td><button>删除</button></td>
</tr>
<tr>
<td>北京</td><td>90</td><td><button>删除</button></td>
</tr>
-->
</table>
</body>
</html>js代码:
/**
* aqiData，存储用户输入的空气指数数据
* 示例格式：
* aqiData = {
* "北京": 90,
* "上海": 40
* };
*/
var aqiData = {};
/**
* 从用户输入中获取数据，向aqiData中增加一条数据
* 然后渲染aqi-list列表，增加新增的数据
*/
function addAqiData() {
}
/**
* 渲染aqi-table表格
*/
function renderAqiList() {
}
/**
* 点击add-btn时的处理逻辑
* 获取用户输入，更新数据，并进行页面呈现的更新
*/
function addBtnHandle() {
addAqiData();
renderAqiList();
}
/**
* 点击各个删除按钮的时候的处理逻辑
* 获取哪个城市数据被删，删除数据，更新表格显示
*/
function delBtnHandle() {
// do sth.
renderAqiList();
}
function init() {
// 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
// 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
}
init();
从任务描述来看，就是用js操控html中的表格和表单实现增加和删除的功能。没动手写之前自己大概过了一下思路，就是遍历数组的属性，然后 innerHTML刷新页面，不过因为要考虑到后面的删除功能，所以在渲染表格的时候考虑用appendChild.tr和td，那么在删除的时候就可以 用removeChild。不过觉得代码量会比较多，很麻烦，所以去看了一下别人组提交的代码，然后发现有一个队伍用的是dataset的方法，删除就实 现的特别简单，代码精简。真的很棒，（这就是差距啊！！！！！！）服气！然后去google了一下dataset的用法和坑。
DataSet是ADO.NET的中心概念。可以把DataSet当成内存中的数据库，DataSet是不依赖于数据库的独立数据集合。所谓独立， 就是说，即使断开数据链路，或者关闭数据库，DataSet依然是可用的，DataSet在内部是用XML来描述数据的，由于XML是一种与平台无关、与 语言无关的数据描述语言，而且可以描述复杂关系的数据，比如父子关系的数据，所以DataSet实际上可以容纳具有复杂关系的数据，而且不再依赖于数据库 链路。
1.html5自定义属性及基础
html5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相应的id:
<a href="javascript:;" data-id="2312">测试</a>这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用css属性选择器进行样式设置.数量不受限制,在控制和渲染数据的时候提供了非常强大的控制.
下面是元素应用data属性的一个例子:
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>要想获取某个属性的值,可以像下面这样使用dataset对象:
var expenseday=document.getElementById('day-meal-expense');
var typeOfDrink=expenseday.dataset.drink;
console.log(typeOfDrink);//tea
console.log(expenseday.dataset.food);//noodle
console.log(expenseday.dataset.meal);//lunch如果浏览器支持dataset,则会弹出注释内容,如果浏览器不支持dataset则会报错,无法获取属性drink/food/meal的值:对象为null或未定义(如IE9版本).
data属性基本上所有的浏览器都是支持的,但是dataset对象支持的就比较特殊了,目前仅在Opera 11.1+,Chrome 9+下可以通过javascript,使用dataset访问你自定义的data属性.至于其他浏览器,FireFox 6+(未出)以及Safari 6+(未出)会支持dataset对象,至于IE浏览器,目前看来还是遥遥无期的趋势.
需要注意的是带边字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类
似,dom.style.borderColor.例如,上面的例子中现有如下data属性,data-meal-time,则我们要获取相应的值可以使
用:expenseday.dataset.mealTime.
2. 为何要使用dataset
如果使用传统的方法获取属性值应该会类似下面:
var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');现在,如果我们要获得多个自定义的属性值,就要用下面N行代码来实现了:
var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
if(attrs[i].name.substring(0,5)=='data-'){
expense[attrs[i].name.substring(5)]=attrs[i].value;
}
}而使用dataset属性,我们根本不需要任何循环去获取你想要的那个值,直接一行秒杀:
expense=document.getElementById('day-meal-expense').dataset;dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.
3. dataset的操作：
可以像下面这样操作名-值对:
charInput=[];
for(var item in expenseday){
charInput.push(expenseday[item]);
}上面这几千代码的作用是让所有的自定义属性塞到一个数组中.
如果你想删除一个data属性,可以这么做:
delete expenseday.dataset.meal;
console.log(expenseday.dataset.meal)//undefined如果你想给元素添加一个属性,可以这么做:
expenseday.dataset.dessert='icecream';
console.log(expenseday.dataset.dessert);//icecream4.跟getAttribute相比的速度
同样是获取属性值，使用dataset操作data要比使用getAttribute稍微慢些.
但是,如果我们只是处理少量的data数据,这种速度上的差异造成的影响是基本上没有的.反而,我们应该看到,使用dataset操作自适应属性要比其他
类似getAttribute的形式要少很多让人头疼的麻烦,并且更具有可读性.因此,权衡来看,操作自定义属性,dataset操作是上选.
5.什么地方使用dataset
每次你使用自定义data属性的时候,使用dataset去获取名-值对就是个不错的选择.考虑到现在很多浏览器还是把dataset当作不认识的外星生物看待,所以,在实际使用的时候,有必要进行一下特征检测,看看是否支持dataset,类似下面的使用:
if(expenseday.dataset){
expenseday.dataset.dessert='icecream';
}else{
expenseday.setAttribute('data-dessert','icecream');
}注意:如果你的应用程序会频繁更新data属性,建议使用JavaScript对象进行数据管理,而不是每次都经由data属性进行更新.
看完了相关介绍，然后再来解决这个问题就很简单了，在添加button的时候为其增加一个属性data-city:’”+city+”’，
item.innerHTML += "<tr><td>" + city + "</td><td>" + aqiData[city] + "</td><td><button data-city ='"+city+"'>删除</button></td></tr>";之后在点击删除按钮的时候调用的函数：
function delHandle(){
delete aqiData[city];
//表格刷新给表格里面的button绑定删除事件：
document.getElementBIId("aqi-table").addEventListener("cilck,function(event){
if(event.target.nodeName.toLowerCase ==='button')
delHandle.call(null,event.target.dataset.city);
)
浙公网安备 33010602011771号