Tabelle um eine Zeile erweitern

[Cannily]

Hallo,
ich habe eine kleine Html Seite mit 3 Eingabefeldern (rgb).

<form name="Paint" action="#" onsubmit="return drawmycolor()">
  <p>Rot: <input name="red" type="text" size="40" ondblclick="this.value = ''"></p>
  <p>Grün: <input name="green" type="text" size="40" ondblclick="this.value = ''"></p>
  <p>Blau: <input name="blue" type="text" size="40" ondblclick="this.value = ''"></p>
  <input type="submit" value="Mal mich"></p>
 </form>

Diese werden dann überprüft ob sie Zahlen sind zwischen 0-255 und anschließend in Hex umgewandelt. getHexValue(zahl).
Soweit geht alles.
Jetzt habe ich aber auch noch eine Tabelle:

<table name="RGB-Darstellung">
  <tr id="reihe1">
  	<th>Rot<sub>Hex</sub></th><th>Grün<sub>Hex</sub></th><th>Blau<sub>Hex</sub></th><th> Visualisierung </th>
  </tr>
</table>

In diese Tabelle sollen nun immer wenn der "Mal mich" submit Button gedrückt wird eine neue Tabellenzeile, mit den 3 Farbwerten in Hex umgewandelt und eine Spalte in die entsprechende Farbe eingefärbt, erstellt werden.

/
	var red = document.Paint.red.value;
	var green = document.Paint.green.value;
	var blue = document.Paint.blue.value;

	var last_row = 1;
	for(var i = 1; i < 1000; i++) {
		if(document.getElementById("reihe"+i)) // If row i exits
			last_row = i;
		else
			break;
       }
//Creates a new row under the last row
	var row = document.getElementById("reihe"+last_row);
	var new_row = document.createElement("tr").setAttribute("id","reihe"+(last_row+1));
	row.appendChild(new_row);
//Creates the innerhtml text
	var html_row = "<td>"+getHexValue(red)+"<sup>16</sup></td>"
			       +"<td>"+getHexValue(green)+"<sup>16</sup></td>"
			       +"<td>"+getHexValue(blue)+"<sup>16</sup></td>"
			       +"<td bgcolor=\"#"+getHexValue(red)+getHexValue(green)+getHexValue(blue)+"\"></td>";
	document.getElementByID("reihe"+(last_row+1))= html_row;

Dieser Code geht jedoch nicht.
Kann mir jemand dabei helfen?

Danke

 

[tombe]

So sollte es klappen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#sub").click(function () {

	red = $("#red").attr("value");
	green = $("#green").attr("value");
	blue = $("#blue").attr("value");

	$("#tabelle").append(
	"<tr>" +
	"<td>" + (red) + "<sup>16</sup></td>" +
    "<td>" + (green) + "<sup>16</sup></td>" +
    "<td>" + (blue) + "<sup>16</sup></td>" +
    "<td bgcolor=\"#" + (red) + (green) + (blue) + "\"></td>" +
    "</tr>"
	);

});

});
</script>

<form name="Paint" action="#">
	<p>Rot: <input id="red" type="text" size="40" ondblclick="this.value = ''" /></p>
	<p>Grün: <input id="green" type="text" size="40" ondblclick="this.value = ''" /></p>
	<p>Blau: <input id="blue" type="text" size="40" ondblclick="this.value = ''" /></p>
	<input type="button" value="Mal mich" id="sub" />

	<table id="tabelle">
	<tr id="reihe1">
		<th>Rot<sub>Hex</sub></th>
		<th>Grün<sub>Hex</sub></th>
		<th>Blau<sub>Hex</sub></th>
		<th>Visualisierung</th>
	</tr>
	</table>
</form>

 

[Cannily]

Hui mit Ajax habe ich mich noch gar nicht beschäftigt.
Kann man das auch nur mit JavaScript, ohne zusätzliche "Klassen" einzubinden, schaffen?

Ich habe jetzt mal das komplexe Child-Parent Kostrukt durch eine einfach innerHTML Funktion ersetzt. Trotzdem geht es nicht...

		//Saves the old table
			var html_old = document.getElementById("table").innerHTML;
		//Creates the innerhtml text
			var html_new = "<tr><td>"+getHexValue(red)+"<sub>16</sub></td>"
						  					+"<td>"+getHexValue(green)+"<sub>16</sub></td>"
						  					+"<td>"+getHexValue(blue)+"<sub>16</sub></td>"
						 					+"<td bgcolor=\"#"+getHexValue(red)+getHexValue(green)+getHexValue(blue)+"\"></td></tr>";
			document.getElementById("table").innerHTML = html_old + html_new;

<table name="RGB-Darstellung" id="table">
  			<tr>
  				<th>Rot<sub>Hex</sub></th><th>Grün<sub>Hex</sub></th><th>Blau<sub>Hex</sub></th><th>Visualisierung</th>
  			</tr>
  		</table>

So habs mit innerHTML hinbekommen. Danke für die Ajax Hilfe, aber die war mit doch zu komplex

 

[Jan-Frederik Stieler]

Hi,
der von Tombe geschriebene Code war kein Ajax. Du meinst sicher wegen dem

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Das ist aber nur der Link zur jQuery-Bibliothek.
Er hatte das jetzt mit jQuery geschrieben du mit traditionellem JS.

Grüße