Skip to content

Instantly share code, notes, and snippets.

@nimbupani
Created May 25, 2011
Embed
What would you like to do?
Files for dataset manipulation
/* 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);
}
<!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