nicht angemeldet
Hallo,
folgende Aufgabenstellung liegt vor mir:
Es sollen in einer Tabelle, die innerhalb eines Formulars liegt, Tabellenzeilen mit je vier Zellen per Buttonclick hinzugefügt werden. Die neuen Zellen sollen ein Textfeld für freie Eingaben enthalten, ein weiteres Textfeld für Farb-Hexadezimalcode, einen Button, der wiederum einen DHTML-Colorpicker öffnet und ein Textfeld als Farbanzeigefeld. Sobald man eine Farbe ausgewählt hat, soll der entsprechende Hexadezimalcode im Farbcode-Textfeld erscheinen und sich die Farbe im Anzeigefeld entsprechend ändern.
Soweit, so gut. Durch Internetrecherche bin ich einigermassen vorangekommen. Bis hierher sieht mein Code ungefähr so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="colorpicker.js"></script>
<script type="text/javascript">
<!--
var rowcount = 1;
function new_field()
{
var row = document.getElementById('form_table').insertRow(rowcount);
var cell_1 = row.insertCell(0);
var cell_2 = row.insertCell(1);
var cell_3 = row.insertCell(2);
var text = document.createTextNode('Option ' + (rowcount + 1) + ' ');
cell_1.appendChild(text);
var input = document.createElement('input');
input.type = 'text';
input.name = 'option[]';
input.className = 'inputbox autowidth';
input.size = 60;
input.maxlength = 150;
cell_1.appendChild(input);
var text = document.createTextNode('max. ');
cell_2.appendChild(text);
var input = document.createElement('input');
input.type = 'text';
input.name = '_max[]';
input.className = 'inputbox autowidth';
input.size = 5;
input.maxlength = 4;
cell_2.appendChild(input);
var text = document.createTextNode('Color ');
cell_3.appendChild(text);
var input = document.createElement('input');
input.type = 'text';
input.name = 'color[]';
input.id = 'color_' + rowcount + '';
input.className = 'inputbox autowidth';
input.size = 10;
input.maxlength = 7;
cell_3.appendChild(input);
var input = document.createElement('input');
var pickColor_string = "pickColor('color_' + (rowcount-1) +'', 'colorwatch_' + (rowcount-1) +'');";
var pickColor = new Function(pickColor_string);
input.type = 'button';
input.name = 'pick[]';
input.id = 'pick_' + rowcount + '';
input.className = 'button2';
input.value = 'Pick';
input.onclick = pickColor;
cell_3.appendChild(input);
var input = document.createElement('input');
input.type = 'text';
input.name = 'colorwatch[]';
input.id = 'colorwatch_' + (rowcount) + '';
input.className = 'inputbox autowidth';
input.size = 1;
input.maxlength = 0;
input.readOnly = true;
cell_3.appendChild(input);
rowcount++;
}
//-->
</script>
</head>
<body>
<form name="posting" action="save.php" method="post">
<div id="colorpicker" class="colorpicker"></div>
<table id="form_table" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Option 1 <input name="option[]" id="option_0" type="text" size="60" maxlength="150" class="inputbox autowidth" /></td>
<td>max. <input size="5" maxlength="4" name="max[]" id="max_0" class="inputbox autowidth" /></td>
<td>Color <input size="10" maxlength="7" name="color[]" id="color_0" class="inputbox autowidth" /><input type="button" name="pick[]" onclick="pickColor('color_0', 'colorwatch_0');" value="Pick" class="button2" /><input type="text" size="1" maxlength="0" name="colorwatch[]" id="colorwatch_0" class="inputbox autowidth" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="5"><input type="button" onclick="new_field();" value="Add Row" /></td>
</tr>
</table>
</form>
</body>
</html>
Leider kommt es dabei zu einem seltsamen Verhalten. Wenn ich bei mehreren Zeilen über einen der dynamischen Buttons (also alle ab Zeile 2 bis zur vorletzten Zeile) die Farbe auswähle, dann werden die Werte und Farben nicht in den dazugehörigen Feldern dargestellt, sondern in denen der letzten Zeile.
Man kann dieses Verhalten auf folgender Seite mal betrachten:
http://www.clancodes.de/test.html
Ich hab mich mal etwas umgeschaut und folgenden Link mit einem ähnlichen Problem gefunden. Allerdings komme ich mit der Lösung nicht wirklich klar.
http://forum.jswelt.de/javascript/36676-addeventlistener-mit-dynamischem-aufruf.html
Ich bin für jede Hilfe und jeden Rat mehr als dankbar ;-)
Viele Grüsse
Kane
Gernot Back