commit
f6634a2ebd
1 changed files with 83 additions and 0 deletions
+ 83
- 0
index.html
View File
| <!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…