commit
f6634a2ebd
1 changed files with 83 additions and 0 deletions
+ 83
- 0
index.html
View File
| @@ -0,0 +1,83 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
| <link rel="stylesheet" href="stylesheet.css"> | |||
| <title>Einkaufszettel</title> | |||
| <script type="text/javascript"> | |||
| function add_row() | |||
| { | |||
| var table_id = "kaufTabelle"; | |||
| var table = document.getElementById( table_id ); | |||
| var rows = table.getElementsByTagName( "tr" ).length; | |||
| var tr = table.insertRow( rows ); | |||
| var td1 = document.createElement( "td" ); | |||
| var td2 = document.createElement( "td" ); | |||
| var td3 = document.createElement( "td" ); | |||
| var td4 = document.createElement( "td" ); | |||
| var td5 = document.createElement( "td" ); | |||
| td1.innerHTML = '<input type="text" id=("teInBezeichnung" & rows) class="inBoLong">'; | |||
| td2.innerHTML = '<input type="text" id=("teInMenge" & rows) class="inBoShort"/>'; | |||
| td3.innerHTML = '<input type="text" id=("teInLaden" & rows) class="inBoMiddle">'; | |||
| td4.innerHTML = '<input type="checkbox" id=("teInCheck" & rows)>'; | |||
| td5.innerHTML = '<input type="submit" value="-" onclick="del_row()" id=("btDelRow" & rows)/>' | |||
| td1.setAttribute('class','tabelle S1 zeile'); | |||
| td2.setAttribute('class','tabelle S2 zeile'); | |||
| td3.setAttribute('class','tabelle S3 zeile'); | |||
| td4.setAttribute('class','tabelle S4 zeile'); | |||
| td5.setAttribute('class','tabelle S5 zeile'); | |||
| tr.appendChild( td1 ); | |||
| tr.appendChild( td2 ); | |||
| tr.appendChild( td3 ); | |||
| tr.appendChild( td4 ); | |||
| tr.appendChild( td5 ); | |||
| } | |||
| function del_row() | |||
| { | |||
| var table_id = "kaufTabelle"; | |||
| var table = document.getElementById( table_id ); | |||
| var tr = table.insertRow( rows ); | |||
| var td1 = document.getElementById( "teInBezeichnung" & rows); | |||
| var td2 = document.getElementById( "teInMenge" & rows ); | |||
| var td3 = document.getElementById( "teInLaden" & rows ); | |||
| var td4 = document.getElementById( "td" ); | |||
| var td5 = document.getElementById( "btDelRow" & rows); | |||
| document.getElementById("kaufTabelle").removeChild(document.getElementById("td1")); | |||
| //removeChild(tr); | |||
| } | |||
| </script> | |||
| </head> | |||
| <body> | |||
| <h1>Einkaufszettel:</h1> | |||
| <h1></h1> | |||
| <div> | |||
| <table id="kaufTabelle" class="tabelle"> | |||
| <caption class="tabellenkopf"> | |||
| <td class="tabelle tabellenkopf S1">Bezeichnung</td> | |||
| <td class="tabelle S2 tabellenkopf">Menge</td> | |||
| <td class="tabelle S3 tabellenkopf">Laden</td> | |||
| <td class="tabelle S4 tabellenkopf"><img width="25px" height="25px" src="Piktogramm-Einkaufswagen.PNG"></td> | |||
| <td class="tabelle S5 tabellenkopf"><p><input type="submit" value="+" onclick="add_row()" id="btAddRow"/></p></td> | |||
| </caption> | |||
| <tr> | |||
| <td class="tabelle S1 zeile"><input type="text" id="teInBezeichnung1" class="inBoLong"></td> | |||
| <td class="tabelle S2 zeile"><input type="text" id="teInMenge1" class="inBoShort"></td> | |||
| <td class="tabelle S3 zeile"><input type="text" id="teInLaden1" class="inBoMiddle"></td> | |||
| <td class="tabelle S4 zeile"><input type="checkbox" id="teInCheck1"></td> | |||
| <td class="tabelle S5 zeile"><p><input type="submit" value="-" onclick="del_row()" id="btDelRow1"></p></td> | |||
| </tr> | |||
| </table> | |||
| </div> | |||
| </body> | |||
| </html> | |||
Loading…