Forum PHP.pl

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.

Ten post edytował Therminus 10.12.2019, 19:55:53