Tabelle mit jQuery

sqe

Mitglied
[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!
 
Zuletzt bearbeitet:
T

Tomate_Salat

Gast
[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! :D)?
 

sqe

Mitglied
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 :D
 
T

Tomate_Salat

Gast
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]
 

MarderFahrer

Gesperrter Benutzer
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

Top Contributor
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.
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
R Angular: Tabelle erhält nicht alle Zeilen Angular, React, JQuery - Fragen zu JavaScript 2
N Formularinhalt in Tabelle durch Button hinzufügen Angular, React, JQuery - Fragen zu JavaScript 4
J Dynamische Tabelle Angular, React, JQuery - Fragen zu JavaScript 1
N Wie kann ich tabelle zerntriert anzeigen Angular, React, JQuery - Fragen zu JavaScript 5
C sort_table.js HTML-Tabelle direkt sortiert anzeigen lassen Angular, React, JQuery - Fragen zu JavaScript 5
T HTML Tabelle - per JS neue Zeile Angular, React, JQuery - Fragen zu JavaScript 4
bugmenot Warum werden die Werte nicht in eine Tabelle geschrieben? Angular, React, JQuery - Fragen zu JavaScript 9
H Zelle einer Tabelle auslesen Angular, React, JQuery - Fragen zu JavaScript 2
B jquery mobile popup verzögert ausführen Angular, React, JQuery - Fragen zu JavaScript 2
SKB jQuery Autocomplete - Title Attribute wird nur bei Mousehover gezeigt - nicht bei Pfeil Navi Angular, React, JQuery - Fragen zu JavaScript 0
isatindersinght jquery convert html to image Angular, React, JQuery - Fragen zu JavaScript 0
S URL Abfrage in Jquery? Angular, React, JQuery - Fragen zu JavaScript 9
J jquery selector? Angular, React, JQuery - Fragen zu JavaScript 9
E AJAX/JQUERY/rxjs Angular, React, JQuery - Fragen zu JavaScript 0
L Bildbearbeitung HTML5 Canvas Fabric.js Jquery Angular, React, JQuery - Fragen zu JavaScript 4
S jQuery - Slider funktioniert nicht im Akkordeon Angular, React, JQuery - Fragen zu JavaScript 3
boxi Jquery bei Ajax Call wird response ignoriert. Angular, React, JQuery - Fragen zu JavaScript 2
D Seite mit Jquery in Pop-Up als IFrame einbinden Angular, React, JQuery - Fragen zu JavaScript 1
M JQuery Bilder austauschen Angular, React, JQuery - Fragen zu JavaScript 92
M JQuery Parameter mit Post übergeben Angular, React, JQuery - Fragen zu JavaScript 4
F jQuery Tabs + Accordion Angular, React, JQuery - Fragen zu JavaScript 5
E Jquery Script gesucht Angular, React, JQuery - Fragen zu JavaScript 3
S Twitter Anzeige via jQuery Angular, React, JQuery - Fragen zu JavaScript 2
M JQuery in Eclipse Angular, React, JQuery - Fragen zu JavaScript 1

Ähnliche Java Themen

Neue Themen


Oben