# Tabelle um eine Zeile erweitern



## Cannily (23. Mai 2013)

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 (23. Mai 2013)

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 (23. Mai 2013)

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 (24. Mai 2013)

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


----------

