Iniciante - Tenho que fazer um cadastro de veículos em tabela de array

Front-end JavaScript
#1

Eu tenho um código que preciso entregar, é basicamente um CRUD, só que tem que fazer busca também. Meu problema é saber se a lógica que usei funciona para os demais métodos, além do método de inserir. Pensei o seguinte: tenho uma função que faz a inserção, a criação, dos elementos no array pronta, então para editar e excluir eu acho que criar por cima, sobrescrever, o elemento antigo funciona para atualizar valores.

Dessa forma eu posso usar essa função para junto de outras que especifique as ações das mesmas na tela fazer edição e exclusão. Na busca eu pensei em fazer comparação de String, mas como estou usando os elementos puros, eu não consigo fazer acesso direto, então coloquei como uma comparação simples.

Segue o código: (tentei colocar o código abaixo, mas ele não vai, tive que colocar o arquivo)

<html>

<head>
    <meta charset="utf-8" />

    <form>

    </form>

</head>

<script>
    var cars = []; //criando vetor
    this.el = document.getElementById("list");
    var itemEdit = -1;
    var thisFeedback = '';


    var FecthAll = function () {
        var data = '';
        if (this.cars.length > 0) {
            for (i = 0; i < cars.length; i++) {
                data += '<tr>';
                data += '<td>' + this.cars[i] + '</td>';
                dados += '<td><button onclick="app.load(' + i + ')">load</button></td>';
            }
        } else {
            this.cars.splice(this.plate)
        }
        this.el.innerHTML = data;

    }

    var add = function (marca, nome, placa) {
        var id = (cars.length + 1);
        cars.push({
            'id': id,
            'marca': marca.value,
            'nome': nome.value,
            'placa': placa.value
        });
        load(id, marca.value, nome.value, placa.value);
        marca.value = '';
        nome.value = '';
        placa.value = '';
        alert("Veiculo cadastrado com êxito!");
        document.getElementById("marca").focus();
    }

    var load = function (id, marca, nome, placa) {
        var tbody = document.getElementsByTagName('tbody')[0];
        var tr = document.createElement('tr');
        var td0 = document.createElement('td');
        var td1 = document.createElement('td');
        var td2 = document.createElement('td');
        var td3 = document.createElement('td');
        tr.appendChild(td0);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tbody.appendChild(tr);
        td0.innerHTML = id;
        td1.innerHTML = marca;
        td2.innerHTML = nome;
        td3.innerHTML = placa;
    }

    var edit = function (id, marca, nome, placa) {
        if (id && marca && nome && placa) {
            if (td0.innerHTML == td0)
                id = td0.innerHTML;
            marca = td1.innerHTML;
            nome = td2.innerHTML;
            placa = td3.innerHTML;
        }
    }

    var exclude = function () {
        if (id && marca && nome && placa) {
            if (td0.innerHTML == td0)
                id = '';
            marca = '';
            nome = '';
            placa = '';
        }
    }

    var search = function () {
        if (id && marca && nome && placa) {
            if (placa == td3.innerHTML) {
                window.alert("Carro encontrado! Placa: " + td3.innerHTML);
            }
        }
    }

</script>

<table width="10%" border="1">
    <thead>
        <tr>
            <th><input type="text" name="marca" id="marca" placeholder="marca"></th>
            <th><input type="text" name="nome" id="nome" placeholder="nome"></th>
            <th><input type="text" name="placa" id="placa" placeholder="placa"></th>
            <th with="25%"><button type="button" onclick="add(document.getElementById('marca'),document.getElementById('nome'), document.getElementById('placa'));"> Add </button></th>
            <th with="25%"><button type="button" onclick="edit(document.getElementById('marca'),document.getElementById('nome'), document.getElementById('placa'));"> Edit </button></th>
            <th with="25%"><button type="button" onclick="exclude(document.getElementById('marca'),document.getElementById('nome'), document.getElementById('placa'));"> Exclude </button></th>
            <th with="25%"><button type="button" onclick="search(document.getElementById('marca'),document.getElementById('nome'), document.getElementById('placa'));"> Search </button></th>
        </tr>
    </thead>
</table>
<table width="5%" border="1">
    <thead>
        <tr>
            <th>Id</th>
            <th>Marca</th>
            <th>Nome</th>
            <th>Placa</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

</html>

Revisao_P1_assistida.html (3,9 KB)