Files for dataset manipulation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Use the console to see the changes being logged */ | |
var expenseday2 = document.getElementById('day2-meal-expense'), | |
typeofdrink, expense = {}, i, j; | |
if (expenseday2.dataset) { | |
console.group('dataset logs'); | |
typeofdrink = expenseday2.dataset.drink; | |
console.log('drink: ' + typeofdrink); | |
expense = document.getElementById('day2-meal-expense').dataset; | |
console.dir(expense); | |
chartInput = []; | |
for (var item in expense) { | |
chartInput.push(expense[item]); | |
} | |
console.log('chart input data: ' + chartInput.join(',')); | |
delete expenseday2.dataset.meal; | |
console.log('after deleting meal data attribute:'); | |
console.log(expenseday2.parentNode.innerHTML.replace(/^\s+|\s+$/g, '')); | |
expenseday2.dataset.dessert = 'icecream'; | |
console.log('after adding dessert data attribute:'); | |
console.log(expenseday2.parentNode.innerHTML.replace(/^\s+|\s+$/g, '')); | |
console.groupEnd(); | |
} else { | |
console.group('attribute logs'); | |
typeofdrink = document.getElementById('day2-meal-expense').getAttribute('data-drink'); | |
console.log('drink', typeofdrink); | |
var attrs = expenseday2.attributes; | |
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; | |
} | |
} | |
console.log('expense', expense); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<title>HTML5 Dataset Demo</title> | |
<style> | |
div[data-drink="coffee"] { | |
background: url('http://dl.dropbox.com/u/952/dataset/lunch.png') top left no-repeat; | |
padding: 0 0 0 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data-meal="lunch">$20.12 (view console)</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment