Sitzplan Information gestalten.

123123123 · 11 Oktober 2011

Hallo, Leute!

Meine Frage ist: Wie kann ich mit Javascript so ein Sitzplan gestalten, in dem ich beim Klicken auf einzelne Sitze (zB Sitz 20) die Information über diesen Sitz bekommen, wie zB welche Reihe, welcher Block und auch Preis!!

Danke für die Hilfe!

Also ich habe einen Sitzplan wo nur die Zahlen in Kästchen stehen, ich muss nur die Zahlen drücken um dann die Infos zu bekommen.

Ich habe eine Datenbank dafür erstellt, da steht auch alles, aber kann man das nicht selber irg.wie gestalten. Denn die Daten, die in der Datenbank stehen sind zu ausführlich! Ich will aber versuchen die selber zu schreiben.
Also zB: Sitz 20=> Block:links, Kategorie:2, Preis:20 €, usw.

Also ich hab zwei PHP-codes:
In dem Ersten stehen die ganzen Infos, also Sitz, Reihe usw.

PHP:

<?php
include("class_db.php");

$planID = 1;

$db = new DB("localhost", "", "", "plaene");
$db->query("TRUNCATE TABLE sitzplan_{$planID}");


for($row=1; $row<=6; $row++)
{
    $x = (($row-1) * 20);
    setRow($x+20, $x+11, $row, "Rechts", 2);        setRow($x+10, $x+1, $row, "Links", 1);
}

function setRow($von, $bis, $reihe, $block, $kategorie)
{
    global $db, $planID;
    for($i=$von; $i>=$bis; $i--)
    {
        $db->query("INSERT INTO sitzplan_{$planID} SET
                    sitz = '{$i}',
                    reihe = '{$reihe}',
                    block = '{$block}',
                    kategorie = '{$kategorie}'");
    }
}
?>

Und in dem zweiten PHP-Code ist halt die Gestaltung von diesem Sitzplan:

PHP:

<?php
include("class_db.php");

$planID = 1;

$db = new DB("localhost", "", "", "plaene");

$plandaten = $db->getQueryData("SELECT * FROM sitzplan_{$planID}");
//p($plandaten);
?>
<html>
    <head>
        <title>Sitzplan <?php echo $planID?></title>
        <style>
            .buehne {
                border : 5px solid black;     
                width: 600px;
                height:  200px;
                margin: 0px auto;
                background-color:#D3D3D3;
            }
            h1 { 
                text-align:center;
                font-size:40px;
                margin-top: 70px ;
            }
            .plan {
                border-collapse: collapse;
                border-style: double;
                border-width: 5px;
                text-align: center;
                margin: 20px auto;
            }
            .row {
                border: dashed;
                font-weight: bold;
                background-color:yellow;
                height:50px;
                width:50px;
            }
            .sitz {
                width:40px;
                height:40px;
                border: 1px solid black;
                cursor: pointer;
            }
            .cat1 {
                background-color: red;
            }
            .cat2 {
                background-color: green;
            }
        </style>
    </head>
<body>

    <div class = "buehne">
        <h1>Bühne</h1>
    </div>
    
    <table class="plan" id="plan">
        <?php
            $i=0;
            for($row=1; $row<=6; $row++)
            {
                echo "<tr>";
                    echo "<td class='row'>{$row}</td>";
                    for($seat=20; $seat>=1; $seat--)
                    {
                        $sitzdaten = $plandaten[$i];
                        
                        echo "<td class='sitz cat{$sitzdaten['kategorie']}'>{$sitzdaten['sitz']}</td>";
                        $i++;
                    }
                    echo "<td class='row'>{$row}</td>";
                echo "</tr>";
            }
        ?>
    </table>
    
    <script>
        var plan = document.getElementById("plan");
    </script>
</body>
</html>

So unten hab ich schon mal mit javascript angefangen, aber weiß nicht weiter.

struppi · 11 Oktober 2011

Code:

var t = document.getElementById('plan');
t.onclick= function(e) {
	if(!e) e = window.event;
	var target = e.srcElement || e.target;
	var row = getRow(target);
	alert(row);
}
function getRow(el) {
	while(el && el.tagName && el.tagName.toLowerCase() !== 'tr'){
		el = el.parentNode;
	}
	return el;
}

Jetzt kannst du aus dem TableRowElement 'row' alle Information auslesen.
IE: TableRowElement Object Members
FF: https://developer.mozilla.org/en/DOM/HTMLTableRowElement

123123123 · 11 Oktober 2011

Danke! Aber wie kriege ich es hin, das es kein Fensterchen kommt, sondern unter dem sitzplan auftaucht! Geht das so?.)

struppi · 11 Oktober 2011

In dem du ein Element dorthin plazierst und dessen Inhalt änderst. Es wäre nett, wenn du konkrete JS Fragen stellen könntest, damit wir dir auch konkret helfen können. So sieht es aus, als ob du erwartest, dass wir dir fertigen Code abliefern.

123123123 · 11 Oktober 2011

Naja ich habe gerade mit JS angefagen! Wollte nur ein Teil wissen, was ich bei mir schreiben soll!

struppi · 11 Oktober 2011

Du willst also, dass wir dir den Code schreiben, weil du es nicht kannst. Eine reichlich anmassende Vorstellung von einem Forum. Wir sind nicht dein Support, sondern wir machen das weil es Spaß macht Leuten beim lernen zu helfen. Da es dir nicht darum geht etwas zu lernen, lass ich es auch.

struppi · 13 Oktober 2011

Sondern? und was heißt sofort? Ich habe dir ja bereits Hilfe gegeben.

123123123 · 13 Oktober 2011

Kannst du mir vielleicht erklären, was der code bedeutet, also die einzige befehle? :)

struppi · 13 Oktober 2011

Geht es auch etwas konkreter? Die Links wo die Tabelleneigenschaften erklärt werden habe ich dir bereits gezeigt. Das Event Objekt findest auch dort
https://developer.mozilla.org/en/DOM/event
event Object (window)

Oder welche "Befehle" meinst du?

mermshaus · 14 Oktober 2011

Während gestern das Ubuntu-Upgrade laaangsaaam durchlief, habe ich ein wenig was gebastelt.

Das ist allerdings nur ein Beispiel/Ansatz. Deine Anwendung ist komplex genug, dass du konkrete Integrationsprobleme selbst lösen musst.

PHP:

<?php

function getCategoryById(array $categories, $id)
{
    $ret = null;

    foreach ($categories as $category) {
        if ($category['id'] === $id) {
            $ret = $category;
            break;
        }
    }

    if ($ret === null) {
        throw new Exception('Category ' . $id . ' does not exist');
    }

    return $ret;
}

// Kategorien

$categories = array(
    array('id' => 4, 'price' => 15, 'cssClass' => 'category-first'),
    array('id' => 7, 'price' => 20, 'cssClass' => 'category-second'),
);

// Sitze

$rows = array();
$seatCounter = 0;

for ($row = 0; $row < 6; $row++) {
    $seats = array();
    
    for ($i = 0; $i < 20; $i++) {
        $seatCounter++;
        $categoryId = 0;

        if ($row < 3) {
            $categoryId = 4;
        } else {
            $categoryId = 7;
        }

        $seats[] = array('id' => $seatCounter, 'categoryId' => $categoryId);
    }

    $rows[] = $seats;
}

?><!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <style type="text/css">

            .seat {
                cursor: pointer;
            }

            .category-first {
                background: #f3e389;
            }

            .category-second {
                background: honeydew;
            }

            #info {
                padding: 3px;
                background: #eee;
            }

        </style>

        <script type="text/javascript">
            /*<![CDATA[*/

            var categories = <?php echo json_encode($categories); ?>;

            $(function () {
                $('.plan .seat').bind('mouseover', function () {
                    for (var i in categories) {
                        var category = categories[i];
                        if ($(this).hasClass(category.cssClass)) {
                            $('#info').html(
                                "Seat ID: " + $(this).attr('id').substr(5) + "\n"
                                + "Category ID: " + category.id + "\n"
                                + "Price: " + category.price)
                            break;
                        }
                    }
                });
            });

            /*]]>*/
        </script>
    </head>

    <body>

        <table class="plan">

        <?php foreach ($rows as $row) : ?>
            <tr>
                <?php foreach ($row as $seat) : ?>
                    <?php $category = getCategoryById($categories, $seat['categoryId']); ?>
                    <td class="seat <?php echo $category['cssClass']; ?>"
                        id="seat-<?php echo $seat['id']; ?>"
                    ><?php echo $seat['id']; ?></td>
                <?php endforeach; ?>
            </tr>
        <?php endforeach; ?>

        </table>

        <div id="info"></div>

    </body>

</html>

PS: TABLE sitzplan_{$planID}, also „pro Plan eine neue Tabelle“, ist sicher nicht die optimale/korrekte Vorgehensweise. Ein klassisches, relationales Datenbankschema sollte nach Möglichkeit nur vertikal wachsen (= mehr Einträge, aber nicht mehr Spalten/Tabellen). Das wäre in diesem Fall wohl eine Tabelle Pläne und eine Tabelle Sitze, die einen Fremdschlüssel auf Pläne enthält (Sitze.Plan_id oder so).

PPS: Auch hier noch mal die Bitte, uns möglichst relevante Informationen zu liefern. Da deinen PHP-Code lokal niemand ausführen kann (es fehlen Abhängigkeiten), stört er in erster Linie. Zudem hat er mit der Fragestellung („Wie verknüpfe ich HTML-Elemente mit JavaScript-Events?“) nicht wirklich viel zu tun.

struppi · 14 Oktober 2011

und während du was gebastelt hast, hat sich 123 mal anderweitig umgeschaut und stellt dort die gleichen Fragen ähnlich Thema: Sitzplan

mermshaus · 14 Oktober 2011

Zusätzlich zu den drei oder vier Threads hier im Forum.

Hach ja. Und da wundern sich die Leute, dass man misstrauisch wird… :-|

So macht das keinen Spaß.

123123123 · 14 Oktober 2011

Also erst mal danke für die Antwort, die war schon hilfreich! Warum reagiert ihr so aggressiv auf alles, egal welche Frage auch man stellt, man wird sofort angegriffen, es sei falsch oder was anderes, aber was daran so falsch ist sagen viele nicht, außer genommen "mermshaus", danke wirklich!! Aber struppi kann bisschen freundlicher sein, ja ich hab auch in anderen Forums Fragen gestellt, um verschiedene Antworten zu kriegen, denn es gibt bestimmt viele Möglichkeiten wie man das machen kann! Tut mir leid, wenn die Fragen nicht verständlich sind oder was auch immer, aber ich mache das erst seit 2 Monaten, hab noch wenig Ahnung davon, deshalb sind meine Fragen auch nicht grad die klugsten! Also bitte, nicht immer so wütend sein und jetzt, wenn mir jemand darauf eine Antwort gibt, bitte nicht runtermachen. Ihr könnt das schon alles und das ist gut so, jede Hilfe zählt für jeden. :)

Sitzplan Information gestalten.

123123123

Guest

struppi

Guest

123123123

Guest

struppi

Guest

123123123

Guest

struppi

Guest

struppi

Guest

123123123

Guest

struppi

Guest

mermshaus

Senior HTML'ler

struppi

Guest

mermshaus

Senior HTML'ler

123123123

Guest

Neueste Beiträge