Add/Remove Rows V2

Javascript Only

by TheFiddler

HTML

<div>
    <p id="warningBrand" style="display:none;">Alert: the brand carousel will not display with less than 2 items!</p>
</div>
<div>
    <table border="1" id="brandTable">
        <thead>
            <td>Link</td>
            <td>Image</td>
            <td>Alt</td>
        </thead>
        <tbody>
            <tr>
                <td>Row1 cell1</td>
                <td>Row1 cell2</td>
                <td>Row1 cell2</td>
            </tr>
        </tbody>
    </table>
    <br>
    <button onclick="brandAddRow()">Create row</button>
    <button onclick="brandDeleteRow()">Delete row</button>
</div>

JavaScript

function brandAddRow() {
    var table = document.getElementById("brandTable");
    var len = table.rows.length;

    var row = table.insertRow(len);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = '<input type="text" value="" style="width:250px;" name="Brand' + len + '_NavigationURL">';
    cell2.innerHTML = '<input type="text" value="" style="width:150px;" name="Brand' + len + '_ImageURL">';
    cell3.innerHTML = '<input type="text" value="" style="width:150px;" name="Brand' + len + '_ImageAlt">';

    if (len >= 2) {
        document.getElementById('warningBrand').style.display = "none";
    }
}

function brandDeleteRow() {


    var table = document.getElementById("brandTable");
    var len = table.rows.length;
    console.log(len);
    if (len > 2) {
        document.getElementById("brandTable").deleteRow(len - 1);
    }
    //if 1 item, display warning

    if (len <= 3) {
        document.getElementById('warningBrand').style.display = "block";
    }
}