Tabelle mit jQuery

[sqe]

[edit vorneweg: Ist das JavaScript, was ich gepostet hab? ???:L Dann entschuldige ich mich ^^]

Guten Abend,

ich möchte für meine Freundin eine kleine Tabelle erstellen; das geht zwar auch mit HTML, sieht aber nicht so hübsch aus. Darum habe ich ein kleines Java Plugin gefunden, welches ansehnliche Lösungen bietet. Ich habe keine Ahnung von Java und möchte bitte auch nur diese eine Seite umsetzen, darum bitte keine Links zu Java Guides - ich will die Sprache nicht lernen, nur die eine Tabelle umsetzen. 🙂

Ich habe eine HTML-Datei namens "liste.html" mit dieser Beispiel-Tabelle. Code:

[XML]<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>[/XML]

Im gleichen Ordner befinden sich dann noch die Dateien jquery.js (Inhalt: Klick) sowie jquery.tablesorter.min (Inhalt: Klick).

Ich bin nach der Methode vorgegangen, wie sie hier beschrieben wird; genau so eine Tabelle hätte ich gerne.

Über Antworten, was ich falsch gemacht habe, würde ich mich sehr freuen. 🙂

Danke!

 

[Tomate_Salat]

[edit vorneweg: Ist das JavaScript, was ich gepostet hab? ???:L Dann entschuldige ich mich ^^]

Ja es ist JavaScript und somit bist du eigentl. im falschen Forum. Passiert hier aber iwie öfters.

Ich bin nach der Methode vorgegangen, wie sie hier beschrieben wird; genau so eine Tabelle hätte ich gerne.

Es ist immer von Vorteil, den Soll- und den Ist-Zustand zu beschreiben ;-). Also: wie ist es jetzt und wie soll es später sein (ok, da gibt es die Seite, aber da gibt es mehr als ein Beispiel ;-) nämlich 2! 😀)?

 

[sqe]

Danke für die Antwort. 😉

Sorry fürs falsche Forum. Darf ich es trotzdem noch kurz probieren? Habe mich auch an ein JavaScript Forum gewandt, dort aber bisher leider keine Antwort erhalten.

Soll-Zustand: Eine Tabelle mit Sortierfunktion und farbigen Leisten; wenn man auf den "hier" Link klickt, sollte ganz oben eigentlich eine Demo-Tabelle sein, in der genau das verwirklicht wurde.

Ist-Zustand: Ne Tabelle ohne JavaScript, da funzt gar nichts 😀

 

[Tomate_Salat]

Das ganze Funktioniert bei mir einwandfrei. Dir fehlt wahrscheinlich einfach nur das css zum Glück:
[xml]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- füge mal das <link.../> bei dir noch ein -->
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/themes/blue/style.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
[/xml]

 

[sqe]

Das ganze Funktioniert bei mir einwandfrei. Dir fehlt wahrscheinlich einfach nur das css zum Glück

Tatsache. Warum braucht man denn zwingend CSS dafür? Ich dachte JavaScript ist eine (unabhängige) Browserunterstützung?

Dennoch: DANKE!! :toll: Hast mir sehr geholfen. Und sorry nochmal fürs falsche Forum.

 

[MarderFahrer]

Na ja, das CSS ist eben das "Style Sheet". Dort wird das Aussehen der einzelnen Seiten Elemente definiert. Ganz früher hat man das alles direkt im HTML Code erledigt. Bei Interesse Siehe:
HTML table bgcolor Attribute

Man kann also schon noch Farben usw direkt an der HTML Tabelle definieren. Aber mit einem CSS geht das etwas komfortabler. Außerdem erleichtert es so, den HTML Code zu lesen, wenn die Farb Gebungen etc ein einem ausgelagerten Sheet abgelegt werden.

 

[Evil-Devil]

Tatsache. Warum braucht man denn zwingend CSS dafür? Ich dachte JavaScript ist eine (unabhängige) Browserunterstützung?

Dennoch: DANKE!! :toll: Hast mir sehr geholfen. Und sorry nochmal fürs falsche Forum.

Eine typische heutige Website setzt sich aus drei Elementen zusammen. Dem HTML, das die Inhalte erzeugt und darstellt. Das CSS, das die Inhalte hübsch darstellt und entsprechend der eigenen Vorstellungen arrangiert und sofern notwendig noch Javascript für Effekte und Spielereien auf dem Client (Browser). Zb. eine Slideshow, Fade In/Out Effekt und vieles mehr.