Beispielcode-Sharing für die Hintergrundfarbe der Javascript-Änderungstabelle

Autor：Eve Cole Aktualisierungszeit：2025-01-18 15:00:03

Kopieren Sie den Codecode wie folgt:

<html>

//Legen Sie die Farbe der aktuellen Zeile fest, wenn Sie auf die aktuell ausgewählte Zeile klicken, und stellen Sie die Farben und Mausereignisse anderer Zeilen als der aktuellen Zeile wieder her.

Funktion selectRow(target)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //Alle Zeilen außer der ersten Zeile durchlaufen

{

if (sTable.rows[i] != target) //Bestimmen Sie, ob die Zeile aktuell ausgewählt ist

{

sTable.rows[i].bgColor = "#ffffff"; //Legen Sie die Hintergrundfarbe fest

sTable.rows[i].onmouseover = resumeRowOver; //onmouseover-Ereignis hinzufügen

sTable.rows[i].onmouseout = resumeRowOut;//Onmouseout-Ereignis hinzufügen

}

anders

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = ""; //Mausereignisse entfernen

sTable.rows[i].onmouseout = ""; //Mausereignisse entfernen

}

//Hintergrundfarbe von tr beim Verschieben

Funktion rowOver(target)

{

target.bgColor='#e4e4e4';

}

//Die Hintergrundfarbe von tr beim Ausziehen

Funktion rowOut(target)

{

target.bgColor='#ffffff';

}

//Stellen Sie das Onmouseover-Ereignis von tr wieder her, das die Aufruffunktion unterstützt

Funktion resumeRowOver()

{

rowOver(this);

}

//Stellen Sie das onmouseout-Ereignis von tr wieder her, das die Aufruffunktion unterstützt

Funktion resumeRowOut()

{

rowOut(this);

}

</script>

<Körper>

<div onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">Für die letzten beiden Funktionen resumeRowOver und resumeRowOut lesen Sie bitte das, was ich zuvor geschrieben habe Fügen Sie dem Seitenelement über js eine dem Ereignis entsprechende Tabelle hinzu HTMLview plaincopy to clipboardprint?

</div>

<tr>

<th>Service ist wichtig</th>

<th>Status</th>

<th>Geschlossen</th>

<th>Informationen</th>

</tr>

<td>Verwandter Inhalt</td>

</tr>

<td>Verwandter Inhalt</td>

</tr>

<td>Verwandter Inhalt</td>

</tr>

<td>Verwandter Inhalt</td>

</tr>

</table>

</body>

</html>