Mam tabelę, którą generuje kod PHP z danymi wyciąganymi z bazy MySQL.
Znalazłem gdzieś w internecie kod JavaScript, który podświetla wybranym wcześniej kolorem kliknięty wiersz tej tabeli. I to działa.
Ale potem zastosowałem dodatkowo inny kod, aby tabela miała pasek przewijania, nieruchome nagłówki kolumn i kolorowany co drugi wiersz. zadziałało tak jak chciałem, ale...
Niestety, podświetlanie klikniętego wiersza przestało działać.

poniżej wklejam kody

JavaScript dla podświetlania wiersza

[JAVASCRIPT] pobierz, plaintext 
 var selectedClass='highlight';
    var selectedRow=null;
 
    function selectRow(row){
    if( row.className.indexOf(selectedClass) != -1 )
     clearSelection( row );
    else{
     clearSelection( selectedRow);
 
    row.className += " "+selectedClass;
    selectedRow=row;
     }
    }
    function clearSelection( row ){
    var reg = new RegExp('(\\s|^)'+selectedClass+'(\\s|$)');
    if(selectedRow!=null) row.className=row.className.replace(reg,' ');
    }
[JAVASCRIPT] pobierz, plaintext 

CSS

[CSS] pobierz, plaintext 
 .highlight {
    background:#00FFFF;
    }
[CSS] pobierz, plaintext 

PHP

[PHP] pobierz, plaintext 
echo '<tr onClick="selectRow(this)">
<td>'.$wiersz['ID'].'</td>
...
</tr>';
[PHP] pobierz, plaintext 

Natomiast kod JavaScript do przewijania tabeli itd jest nastepujący.

[JAVASCRIPT] pobierz, plaintext 
function removeClassName (elem, className) {
	elem.className = elem.className.replace(className, "").trim();
}
 
function addCSSClass (elem, className) {
	removeClassName (elem, className);
	elem.className = (elem.className + " " + className).trim();
}
 
String.prototype.trim = function() {
	return this.replace( /^\s+|\s+$/, "" );
}
 
function stripedTable() {
	if (document.getElementById && document.getElementsByTagName) {  
		var allTables = document.getElementsByTagName('table');
		if (!allTables) { return; }
 
		for (var i = 0; i < allTables.length; i++) {
			if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
				var trs = allTables[i].getElementsByTagName("tr");
				for (var j = 0; j < trs.length; j++) {
					removeClassName(trs[j], 'alternateRow');
					addCSSClass(trs[j], 'normalRow');
				}
				for (var k = 0; k < trs.length; k += 2) {
					removeClassName(trs[k], 'normalRow');
					addCSSClass(trs[k], 'alternateRow');
				}
			}
		}
	}
}
 
window.onload = function() { stripedTable(); }
[JAVASCRIPT] pobierz, plaintext 

Kodu CSS nie umieszczam, bo post za długi się robi

Dodatkowo w kodzie HTML mam następujące linijki

[HTML] pobierz, plaintext 
<thead class="fixedHeader">
<tbody class="scrollContent">
<tr class="alternateRow">
[HTML] pobierz, plaintext 

Finalnie obydwa te kody JavaScript umieściłem w jednym pliku, ale widocznie coś się kłóci, choć błędów nie widać.
Jeżeli zrobię odwołanie do tego pliku w kodzie dla "zwykłej" tabeli, to podświetlanie wiersza działa, tak samo działa dobrze z tym plikiem dla kodu z przewijaniem tabeli, tyle że nie działa podświetlanie wiersza.
Pomoże ktoś?

EDIT:

To chyba nie o JavaScript chodzi, a o ten kod, który przewija tabelę, czyli CSS raczej...

EDIT 2:
Teraz już wiem na pewno co jest powodem niedziałania. Namierzyłem fragment kodu CSS odpowiedzialny za kolorowanie co drugiego wiersza i to on przeszkadza.
Chciałbym jednak pozostawić to kolorowanie mieć dodatkowo podświetlanie klikniętego wiersza.
Mógłbym wkleić przykładowy kod HTML, JavaScript i CSS, ale post na forum nie przyjmie ze względu na rozmiar.
Gdzie mógłbym umieścić te pliki, aby chcący zająć się tym tematem mogli je pobrać?
PHP i baza nie są potrzebne.

EDIT 3:
Nie wiem, czy to będzie trzymać, ale może ktoś zdąży to sprawdzić.
https://jsbin.com/yepoqedugu/1/edit?html,css,js,output

Nie otwierać w wynalazkach Microsoftu!

EDIT 4:
Jeżeli ktoś kliknął na ten link i mu się otworzyło, to tam jest taki fragment kodu CSS.

[CSS] pobierz, plaintext 
/* Ten fragment kodu CSS przeszkadza w podświetlaniu po kliknięciu, a odpowiada za kolorowanie co drugiego wiersza */
/* make TD elements pretty. Provide alternating classes for striping the table */
/* <a href="http://www.alistapart.com/articles/zebratables/" target="_blank">http://www.alistapart.com/articles/zebratables/</a>                             */
 
/*tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFA;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
 
tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
 
*/
[CSS] pobierz, plaintext 

zmieniłem na następujący:

[CSS] pobierz, plaintext 
tbody.scrollContent td, tbody.scrollContent tr.normalRow td, tbody.scrollContent tr.selectRow td {
	background: #FF58;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
 
tbody.scrollContent tr.alternateRow td, tbody.scrollContent tr.selectRow td {
	background: #EEE8;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}
[CSS] pobierz, plaintext 

Oczywiście zlikwidowałem komentarze.
I wydaje się działać. Tylko że kolor podświetlenia jest zależny od koloru linii, na której się kliknie (na żółtym inny niż na szarym).

Może to się komuś przyda.