84 lines
3.6 KiB
HTML
84 lines
3.6 KiB
HTML
|
<!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>
|