Zum Inhalt springen

Mit Jquery ein <div> elemente und ein <tr> element zusammenführen


Empfohlene Beiträge

Hallo,

ich habe ein Problem.

Ich benutze Jquery für ein kleines Kalender Tool. Dieses funktioniert soweit auch nur das ich die <div> elemente die die Termine repräsentieren nicht in den dafür vorgesehenen <tr>, der einen tag repräsentiert, geschrieben bekomme. Versucht hab ich es schon mit append(To), prepend(To) und einigen weiteren wie .html() oder .text()... zur zeit sieht der Quellcode wie folgt aus:

Index.php


<html>

	<head>

		<link rel="stylesheet" type="text/css"

			href="./fullcalendar/fullcalendar.css" />

		<link rel="stylesheet" type="text/css"

			href="./css/jquery-ui-1.8.19.custom.css" />

		<script type="text/javascript" src="./jquery/jquery-1.7.2.min.js"></script>

		<script type="text/javascript"

			src="./jquery/jquery-ui-1.8.19.custom.min.js"></script>

		<script type="text/javascript" src="./fullcalendar/fullcalendar.js"></script>

		<script type="text/javascript" src="kalender.js"></script>

		<style>

			.termin {

				width: 75px;

				heigth: 10px;

				z-index: 2;

				background-color: blue;

				color: white;

			}


			#lolol {

				top: 0px;

				left: 0px;

				position: absolute;

				z-index: 9;


				display: none;

				color: blue;

			}

		</style>

	</head>

	<body>

		<div id="lolol"><span style="left: 15px; position: absolute;"><-- Mauszeiger</span> </div>

		<div class="termin">TERMIN</div>

		<?php

			require_once 'class.kalender.php';


			echo "<div style='left:10px; position:absolute; z-index: 0;'>";

				$kal = new Kalender("events.json", "test");

			echo "</div>";


			echo "<div style='left:250px; position:absolute; z-index: 0;'>";

				$kal2 = new Kalender("events.json", "test2");

			echo "</div>";

		?>

	</body>

</html>


Kalender.js

/**

 * Funktion zum Setzen neuer Termin Werte

 */

function setTermin(event)

{

	 $('#drag-element').appendTo('#05/1/2012-test');

}


/**

 * Funktion zum laden und positionieren vorhandener Termine.

 */

function loadTermine() 

{

	$.getJSON('./events.json', function(data) {

		  $('#drag-element').appendTo('#05/1/2012-test');

		});

}

//erster aufruf um die Termine an ihre richtige Stelle zu bringen.



$(document).ready(function() {

	loadTermine();

	$('.drop').droppable({

		accept: ".termin",

		hoverClass: "ui-state-active",

		drop: function( event, ui) {

			setTermin(event);

		}

	});


	$('.termin').draggable({

		cursor: "hand",

		start: function(event, ui) {

			$(this).attr('id', 'drag-element');

		}

	});


	$('body').mousemove(function(e) {

		$('#lolol').show();

		$('#lolol').css("top", e.pageY+"px");

		$('#lolol').css("left", e.pageX+"px");

	}); 

});

Der Kalender wird von einer klasse aufgebaut, diese beinhaltet nur arrays mit Monaten und Tagen und baut dann in einer Schleife die Tabelle auf.

Ich hoffe jemand kann mir helfen weil ich an diesem Problem seit 2 Tagen sitze.

Danke im Vorraus.

MFG,

Rinma

Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 2 Wochen später...

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...