4

Hello all I am having a problem with my code. I want to add a new row with the same fields whenever I click on add product. However when I run the code and I click on add product it doesn't work.

Here's the HTML:

<table class="table" id="concierge">
<th>Item Name</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Image</th>
<tr>
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td>
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td>
<td><input type="text" name="description" id="description" style="border:none;"/></td>
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td>
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td>
<td><input type="file" name="image" id="image" style="border:none"></td>
<td><input type="checkbox" name="check" placeholder="Delete"></td>
</tr>
</table>
<input type="button" name="add" value="Add Product" onclick="addRow(concierge)"/>
<input type="button" name="delete" value="Delete Product" onclick="deleteRow(concierge)"/>

and the Script I am using for both Delete and Add:

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name="itemname";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "itemcode";
    cell3.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "description";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "quantity";
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "price";
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("input");
    element6.type = "file";
    element6.name = "image";
    cell6.appendChild(element6);

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("input");
    element7.type = "checkbox";
    element7.name = "check";


}

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
    }catch(e) {
        alert(e);
    }
}

Thank you in advance for your help

0

1 Answer 1

2

concierge should be "concierge"

and change cell3 to cell2 for element2

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name="itemname";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "itemcode";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "description";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "quantity";
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "price";
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("input");
    element6.type = "file";
    element6.name = "image";
    cell6.appendChild(element6);

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("input");
    element7.type = "checkbox";
    element7.name = "check";


}

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
    }catch(e) {
        alert(e);
    }
}
<table class="table" id="concierge">
<th>Item Name</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Image</th>
<tr>
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td>
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td>
<td><input type="text" name="description" id="description" style="border:none;"/></td>
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td>
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td>
<td><input type="file" name="image" id="image" style="border:none"></td>
<td><input type="checkbox" name="check" placeholder="Delete"></td>
</tr>
</table>
<input type="button" name="add" value="Add Product" onclick="addRow('concierge')"/>
<input type="button" name="delete" value="Delete Product" onclick="deleteRow('concierge')"/>

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.