You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 3.6KB

4 years ago
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="stylesheet.css">
  5. <title>Einkaufszettel</title>
  6. <script type="text/javascript">
  7. function add_row()
  8. {
  9. var table_id = "kaufTabelle";
  10. var table = document.getElementById( table_id );
  11. var rows = table.getElementsByTagName( "tr" ).length;
  12. var tr = table.insertRow( rows );
  13. var td1 = document.createElement( "td" );
  14. var td2 = document.createElement( "td" );
  15. var td3 = document.createElement( "td" );
  16. var td4 = document.createElement( "td" );
  17. var td5 = document.createElement( "td" );
  18. td1.innerHTML = '<input type="text" id=("teInBezeichnung" & rows) class="inBoLong">';
  19. td2.innerHTML = '<input type="text" id=("teInMenge" & rows) class="inBoShort"/>';
  20. td3.innerHTML = '<input type="text" id=("teInLaden" & rows) class="inBoMiddle">';
  21. td4.innerHTML = '<input type="checkbox" id=("teInCheck" & rows)>';
  22. td5.innerHTML = '<input type="submit" value="-" onclick="del_row()" id=("btDelRow" & rows)/>'
  23. td1.setAttribute('class','tabelle S1 zeile');
  24. td2.setAttribute('class','tabelle S2 zeile');
  25. td3.setAttribute('class','tabelle S3 zeile');
  26. td4.setAttribute('class','tabelle S4 zeile');
  27. td5.setAttribute('class','tabelle S5 zeile');
  28. tr.appendChild( td1 );
  29. tr.appendChild( td2 );
  30. tr.appendChild( td3 );
  31. tr.appendChild( td4 );
  32. tr.appendChild( td5 );
  33. }
  34. function del_row()
  35. {
  36. var table_id = "kaufTabelle";
  37. var table = document.getElementById( table_id );
  38. var tr = table.insertRow( rows );
  39. var td1 = document.getElementById( "teInBezeichnung" & rows);
  40. var td2 = document.getElementById( "teInMenge" & rows );
  41. var td3 = document.getElementById( "teInLaden" & rows );
  42. var td4 = document.getElementById( "td" );
  43. var td5 = document.getElementById( "btDelRow" & rows);
  44. document.getElementById("kaufTabelle").removeChild(document.getElementById("td1"));
  45. //removeChild(tr);
  46. }
  47. </script>
  48. </head>
  49. <body>
  50. <h1>Einkaufszettel:</h1>
  51. <h1></h1>
  52. <div>
  53. <table id="kaufTabelle" class="tabelle">
  54. <caption class="tabellenkopf">
  55. <td class="tabelle tabellenkopf S1">Bezeichnung</td>
  56. <td class="tabelle S2 tabellenkopf">Menge</td>
  57. <td class="tabelle S3 tabellenkopf">Laden</td>
  58. <td class="tabelle S4 tabellenkopf"><img width="25px" height="25px" src="Piktogramm-Einkaufswagen.PNG"></td>
  59. <td class="tabelle S5 tabellenkopf"><p><input type="submit" value="+" onclick="add_row()" id="btAddRow"/></p></td>
  60. </caption>
  61. <tr>
  62. <td class="tabelle S1 zeile"><input type="text" id="teInBezeichnung1" class="inBoLong"></td>
  63. <td class="tabelle S2 zeile"><input type="text" id="teInMenge1" class="inBoShort"></td>
  64. <td class="tabelle S3 zeile"><input type="text" id="teInLaden1" class="inBoMiddle"></td>
  65. <td class="tabelle S4 zeile"><input type="checkbox" id="teInCheck1"></td>
  66. <td class="tabelle S5 zeile"><p><input type="submit" value="-" onclick="del_row()" id="btDelRow1"></p></td>
  67. </tr>
  68. </table>
  69. </div>
  70. </body>
  71. </html>