jQuery Character Table
The other day I was looking for the HTML code for the ⌘ (in case you can't see it, that's the command key symbol), found in mac keyboards. It was not the first time I was looking for the HTML code for one of those funky characters. I remember having a hard time trying to represent some Math symbols, like sums and integral equations from my college Calculus days.
I thought this would be a nice opportunity to create a small jQuery sample that renders a range (or ranges) of HTML characters along with their codes.
I started with a simple HTML page, leaving all the JavaScript in an external file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Characters</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<script type="text/javascript"
src="jquery-1.2.6.js"></script>
<script type="text/javascript"
src="char-table.js"></script>
</head>
<body>
From (hex): <input id="range_from" type="text" /> <br/>
To (hex): <input id="range_to" type="text" /> <br/>
<input type="button" value="Load" id="btnLoad" />
<input type="button" value="Load Example" id="btnLoadEx" />
<input type="button" value="Load Keyboard Symbols"
onclick="CHARTABLE.loadKeyboardSymbols();" />
<table id="char_table" border="1" />
</body>
</html>
Here's the JavaScript in the file char-table.js.
$(function(){
//here we put everything that will run when the page is ready
$('#btnLoad').click(function(){
// notice how we get the value of the input fields using val()
// notice how to parse hex numbers in JS
var from = parseInt($('#range_from').val(), 16);
var to = parseInt($('#range_to').val(), 16);
CHARTABLE.loadRange(from, to);
});
$('#btnLoadEx').click(function(){
//setting the value of each input field
$('#range_from').val('2190');
$('#range_to').val('2195');
//fire the click event of the Load button
$('#btnLoad').click();
});
});
// the CHARTABLE object acts as a namespace
var CHARTABLE = {
loadRanges: function() {
this.clearTable();
for(var i=0; i<arguments.length; i++) {
this.appendRange(
parseInt(arguments[i][0], 16),
parseInt(arguments[i][1], 16)
);
}
},
loadRange: function(from, to) {
this.clearTable();
this.appendRange(from, to);
},
clearTable: function(){
//the html() function is how we replace the innerHTML with jQuery
$('#char_table').
html('<tr><th>Character</th><th>Code</th></tr>');
},
appendRange: function(from, to){
//we can create stand alone DOM elements with $()
var tbody = $('<tbody/>');
for(var i=from; i<=to; i++) {
//notice how we can convert a number to hex
$('<tr>').
append('<td>&#x' + i.toString(16) + ';</td>').
append('<td>&#x' + i.toString(16) + ';</td>').
appendTo(tbody);
}
//adding the tbody to the table at the end
// renders faster than adding each row to
// the table as we go
$('#char_table').append(tbody);
},
loadKeyboardSymbols: function(){
this.loadRanges(
['21e7', '21e7'],
['21a9', '21a9'],
['2303', '2305'],
['2318', '2318'],
['2324', '2327'],
['232b', '232b'],
['2190', '2198'],
['21de', '21df'],
['21e4', '21e9']
);
}
};
Now enter the range from 2100 to 2400 and stare at a whole bunch of characters that can become useful in some situations.
Note: The characters don't render equally in IE and Firefox, but a large number of them render just fine in both browsers.
