Create a gist now

Instantly share code, notes, and snippets.

Two selectors : visible and metadata
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<style>
.even {background: #CCC}
.odd {background: #FFF}
</style>
</head>
<body>
<button id="clear">Clear Strip</button>
<button id="strip">Add Strip with visible selector</button>
<button id="strip2">Add Strip with metadata selector</button>
<table id="datas">
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</thead>
<tbody id="datas-body">
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
function randomString(length, chars) {
var mask = '';
if (chars.indexOf('a') > -1)
mask += 'abcdefghijklmnopqrstuvwxyz';
if (chars.indexOf('A') > -1)
mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (chars.indexOf('#') > -1)
mask += '0123456789';
if (chars.indexOf('!') > -1)
mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
var result = '';
for (var i = length; i > 0; --i)
result += mask[Math.round(Math.random() * (mask.length - 1))];
return result;
}
function strip(){
var tbody = $("tbody");
tbody.find("tr:visible:odd").addClass("odd");
tbody.find("tr:visible:even").addClass("even");
}
function strip2(){
var tbody = $("tbody");
tbody.find("tr[data-visible]:odd").addClass("odd");
tbody.find("tr[data-visible]:even").addClass("even");
}
function clear(){
$("tbody > tr ").removeClass("odd").removeClass("even");
}
var i = 0;
for (; i < 5000; i++) {
var tr = "<tr data-isdata='true' data-visible='true'><td> "+ i + " " + randomString(36, 'aA')
+ "</td><td>" + randomString(36, 'aA')
+ "</td><td>" + randomString(36, 'aA')
+ "</td><td>" + randomString(36, 'aA')
+ "</td><td>" + randomString(36, 'aA')
+ "</td><td>" + randomString(36, 'aA')
+ "</td></tr>";
$("#datas-body").append(tr);
var hiddentr = "<tr style='display:none;'><td col='7'></td></tr>";
$("#datas-body").append(hiddentr);
}
$("#clear").click(function(){
clear();
});
$("#strip").click(function(){
strip();
});
$("#strip2").click(function(){
strip2();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment