jennfa63626
/
Hoodie-Einkaufswagen

<!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>