Beiträge von Sempervivum

Lege lieber eine Testseite an und poste die URL, dann muss man nicht jede einzelne Datei herunterladen.

Habe mal etwas ausgearbeitet:
http://pastebin.com/AGeG6Bpf

Warum hast Du denn drei Funktionen statt einer angelegt? Und sind deine Bilder alle im JPG-Format?

Wenn Du schon schreibst, dass es nicht dein Steckenpferd ist, warum machst Du dir dann die Mühe, es selbst zu entwickeln? Es gibt doch sehr viele gute vorgefertigte Slider wie Cycle2.

Bei mir war maxValue undefiniert. Außerdem macht es keinen Sinn, einen Wert als Parameter an die Funktion random() zu übergeben, ihn darin aber nicht auszuwerten.
Und dies erzeugt einen Fehler, weil die Variable Stop nicht definiert ist:

if (this.innerHTML != Stop) myTable.setAttribute("data-locked", "true");

Hast Du die anderswo definiert?
Dies funktioniert bei mir:
http://pastebin.com/VG9AQzyF

PS: Ich empfehle dir, dich mit den Developertools deines Browsers vertraut zu machen. Die zeigen solche Fehler an, so dass es leicht ist, sie zu finden und zu beheben.

Verwende diese Funktion, um neue Zufallswerte in die Tabelle einzutragen:

function randomizeTable() {
for (var irow = 0; irow < yVar; irow++) {
for (var icol = 0; icol < xVar; icol++) {
document.getElementById('tabelle1').rows[irow].cells[icol].innerHTML = random();
}
}
}

Dann liegt es möglicher Weise an der ID. Du musst genau die verwenden, die Du hier übergeben hast:

node.appendChild(createTable(row, col, "tabelle1"), node);

Der Ansatz ist schon richtig, Du musst nur

• die richtige ID verwenden, um die Tabelle zu ermitteln
• innerHTML verwenden, um den Inhalt der Zelle zu bekommen

So funktioniert's:

function searchValue(r,i){
var rowIndex = r;
var cellIndex = i;
var value = document.getElementById('tabelle1').rows[rowIndex].cells[cellIndex].innerHTML;
alert(value);
}

</script>
<input type="button" name="btnStart" value="Starte neu" onclick="searchValue(5,8)" />

Ich habe es lieber bei pastebin eingestellt, denn ich hatte die Struktur tolock mit Kommentaren versehen, die nur lesbar sind, wenn die Einrückungen stimmen:
http://pastebin.com/AxxmV32F

Man könnte daran denken, die Eventlistener zu entfernen, aber das ist ziemlich umständlich, weil es anonyme Funktionen sind. Einfacher ist es, eine Statusvariable in einem data-Attribut der Tabelle zu benutzen:
http://pastebin.com/vem43VF2

(Leider verschluckt dieses Forum immer die Zeilenumbrüche, daher habe ich es bei pastebin eingestellt.)
Ich habe mir erlaubt, die Struktur mit #wrtabelle1 und #tabelle1 etwas zu modifizieren.

Zitat

Wie kann ich Dir eine gute Flasche Wein zukommen lassen?

Das ist nicht nötig, ich bin im Ruhestand und Programmieren macht mir Spaß

Ich musste aufpassen, mich bei den Indizes und Klammern nicht zu verlaufen, aber jetzt habe ich etwas ausgearbeitet:

<div id="row1" class="row">
<img class="productimg"
src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg"
data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
data-name="Name1-1" data-price="8,50">
<img class="productimg"
src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg"
data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
data-name="Name1-2" data-price="11,50">
<span class="productinfo"></span>
</div>
<div id="row2" class="row">
<img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-name="Name2-1" data-price="8,50">
<img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-name="Name2-2" data-price="11,50">
<img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-name="Name2-3" data-price="17,50">
<img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-name="Name2-4" data-price="19,50">
<span class="productinfo"></span>
</div>
<style>
.productinfo {
display: inline-block;
width: 200px;
height: 200px;
vertical-align: top;
}
</style>
<script>
var imglocked = "http://lorempixel.com/output/technics-q-g-200-200-5.jpg";
var tolock = {
// +-- Index des geklickten Bildes in der 1. Zeile
// | +-- Index der Folgezeile
// | | +-- Index des 1.zu sperrenden Bildes
// | | | + --Index des 2. zu sperrendes Bildes
// | | | |
0: { 1: [0, 2] },
1: { 1: [1, 3] }
};
var rows = $("div.row");
$(".productimg").on("click", function () {
var lock = false;
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).attr("src", $(this).attr("data-src"));
$(this).siblings("span.productinfo").html("");
} else {
lock = true;
var selimg = $(this).siblings(".productimg.active");
selimg.attr("src", selimg.attr("data-src")).removeClass("active");
$(this).addClass("active");
$(this).attr("src", $(this).attr("data-src-sel"));
var htm = $(this).attr("data-name") + "<br>";
htm += $(this).attr("data-price");
$(this).siblings("span.productinfo").html(htm);
}
var ctolock = tolock[$(this).index()];
rows.each(function (irow) {
if (irow > 0) {
var row = $(this);
$(this).children(".productimg").each(function (iimg) {
if (ctolock[irow].indexOf(iimg) != -1 && lock) {
$(this).attr({ "src": imglocked, "data-locked": "true" });
} else {
$(this).attr({ "src": $(this).attr("data-src"), "data-locked": "false" });
}
});
}
});
});
</script>

Leider wieder ohne Tags, aber es ging nicht anders. Benutze
http://jsbeautifier.org/

um das Javascript neu zu formatieren.

OK, ich arbeite etwas aus ...

Verstehe ich soweit, bis auf dieses:

Zitat

Die Positionen können berechnet werden.

Wie lautet denn die Rechenvorschrift? Aus den Beispielen kann ich kein System erkennen?

Zitat

Nach Klick auf das 2 Bild in der ersten Reihe ist das 3 und 4 Bild in der 2 Reihe nicht mehr wählbar

Muss das erweiterbar sein, d. h. gibt es eine 3. Reihe, müssen dort auch Bilder gesperrt werden, gibt es eine 4. ebenso usw.? Und wie werden diese Bilder fest gelegt, sind sie vollkommen frei wählbar oder können die Positionen berechnet werden?

Zitat

Die Grafik wird getauscht und ein Klick darauf ist nicht mehr möglich.

Worauf soll das zutreffen, auf das geklickte Bild in der 1. Reihe oder auf die anderen Bilder?

Zitat

wie bekomme ich iii und jjj aus der obigen Funktion createTable raus und in eine andere Funktion rein mit der ich dann die Übereinstimmung überprüfen kann?

Ich würde die Sache etwas anders angehen und die Prüfung in der Callback-Funktion anstoßen (du brauchst ja sowie so den Klick als Anstoß), indem Du die Funktion, die die Prüfung machst, dort aufrufst und die benötigten Werte als Parameter übergibts.

Zitat

ich verstehe es zwar nicht

Dann will ich versuchen, es zu erklären. Verwendet man die Variablen i und j "einfach so" in der Callback-Funktion, hat man das Problem, dass diese nicht sofort ausgeführt wird, während die Schleife durchläuft, sondern erst später, wenn der Klick erfolgt. Zu diesem Zeitpunkt ist die Schleife längst durchgelaufen und die Variablen i und j haben ihre Endwerte.
Bei dem Code mit zwei verschachtelten Funktionen wird die äußere sofort aufgerufen, wenn die Schleife durchläuft. Sie hat i und j als Parameter und liefert die eigentliche Callback-Funktion als Rückgabewert zurück. In der äußeren Funktion haben dann die Parameter iii und jjj die Werte, die sie während des Schleifendurchlaufs hatten und die innere verwendet diese, wenn sie durch Klick aufgerufen wird.

Das ist leider ein bisschen kompliziert und sieht so aus:

function createTable(row, col, id) {

var myTable = document.createElement("table");
var mytablebody = document.createElement("tbody");

for (var j = 0; j < row; j++) {
mycurrent_row = document.createElement("tr");
for (var i = 0; i < col; i++) {
mycurrent_cell = document.createElement("td");
mycurrent_cell.addEventListener("click", function (iii, jjj) {
return function () {
console.log(this.innerHTML, iii, jjj);
}
}(i, j));
currenttext = document.createTextNode(random());
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}

mytablebody.appendChild(mycurrent_row);
}

myTable.appendChild(mytablebody);
myTable.setAttribute("ID", id);
return myTable;
}
Das Forum hat leider die Zeilenumbrücke verschluckt, daher muss ich den Code ohne Tags posten.

Die Parameter der Listener-Funktion sind vordefiniert, Du kannst sie nicht einfach belegen, wie Du möchtest:
https://developer.mozilla.org/…nt_handlers#Event_handler's_parameters_this_binding_and_the_return_value
Mit "this" hast Du Zugriff auf das Element, das geklickt wurde und mit innerHTML kannst Du dann den Inhalt der Tabellenzelle ermitteln:

this.innerHTML

Hast Du die Funktion addEventListener() gefunden? Die musst Du mit deinen Tabellenzellen verknüpfen:

function createTable(row, col, id) { 
                var myTable = document.createElement("table");
                var mytablebody = document.createElement("tbody");
 
                for (var j = 0; j < row; j++) {
                    mycurrent_row = document.createElement("tr");
                    for (var i = 0; i < col; i++) {
                        mycurrent_cell = document.createElement("td");
                        mycurrent_cell.addEventListener("click", function() {console.log(this.innerHTML);})
                        currenttext = document.createTextNode(random());
                        mycurrent_cell.appendChild(currenttext);
                        mycurrent_row.appendChild(mycurrent_cell);
                    }
 
                    mytablebody.appendChild(mycurrent_row);
                }
 
                myTable.appendChild(mytablebody);
                myTable.setAttribute("ID", id);
                return myTable;             }

Ich habe mich für eine Lösung mit PHP entschieden, weil die Seite dann auch ohne Javascript funktioniert. Die Dateien lade ich als gezippt als Anhang hoch. Die CSS-Datei liegt in einem Unterverzeichnis "css", das kannst Du jederzeit ändern. Die Liste ist $areas_json in areas.php, diese musst Du für deine Zwecke umändern und erweitern. Ich hoffe, der Aufbau ist selbst erklärend und Du kannst dich in die Syntax des JSON hinein denken. Wenn nicht, frage nach. In der linken oberen Ecke wenn Du areasindex.php im Browser öffnest, siehst Du einen Hinweistext, der angibt, ob das JSON OK ist. Du kannst das JSON auf dieser Seite überprüfen, ob sie fehlerfrei ist bzw. Fehler anzeigen lassen:
http://jsonlint.com/
Dazu musst Du das JSON ohne die umschließenden einfachen Hochkommas kopieren und auf der Seite einfügen. Ich empfehle, das JSON gleich auf dieser Seite zu editieren und wenn es fertig und fehlerfrei ist, in die PHP-Datei zu kopieren.
Aus dem JSON erzeugt das Skript sowohl das CSS:

<?php makecssall(); ?>

als auch das HTML für jeweils einen Content-Bereich:

<div id="content1" class="content"><?php makehtml("content1"); ?>

Da die Kopfseite areasindex.php PHP benötigt, wird sie nur auf einem Webserver funktionieren.

Wenn etwas nicht funktioniert, musst Du dich wieder melden.
Man hätte es auch mit Excel machen können, aber dann wäre das Handling und vor allem das Parsing komplizierter geworden.