Ваш код имеет несколько проблем.
1. Поскольку вы выбрали onDomReady на боковой панели, определенные вами функции не являются глобальными.Вместо этого используйте no wrap (head).
Примечание : вам не нужно объявлять эти функции глобально, если вы используете метод jQuery .bind() (см. # 5).
2. Вам не нужны <style> и </style> на панели CSS.
3. Вы добавляете класс по переключателю,это не имеет никакого эффекта.Вы должны сделать что-то вроде этого:
HTML
<input type='radio' id='foo' name='mybtns' /> <label for='foo'>Label</label>
JavaScript
$('label[for=foo]').addClass('active').removeClass('inactive');
Или в этом случае сделать это на элементах <td>.
4. Это проблема стилей, но вы должны использовать абзацы (<p>text</p>) вместо простых текстовых узлов (text) и разрывы строк после каждой строки.
5. Если вы не используете встроенные обработчики событий и встроенные стили, вместо этого вы пишете код CSS и JS в отдельных файлах и ссылаетесь на них следующим образом:
<link rel='stylesheet' href='http://example.com/css/default.css' />
<script src='http://mysite.com/js/default.js'></script>
Поскольку вы уже используете jQuery, избежать встроенных обработчиков событий просто: вы можете использовать функцию jQuery .bind(), она будет работать во всех браузерах.
$('#el').bind('click', function() {
// your event handler goes here
});
Некоторые обработчики событий (например, * 1049)*, keyup, change) имеют сокращения:
$('#el').click(function() {
// your event handler goes here
});
6. Стоит ли использовать таблицы для разметки? Нет. В этом случае лучше использовать формы.
7. Вместо записи .addClass('active').removeClass('inactive') в двух функциях вы можете использовать .toggleClass('active inactive') [документы] и тогда у вас есть одна функция вместо двух.