Ejemplo sencillo manejar una Tabla con JavaScript

Bueno, no se si comienzo bien, pero siempre me gusta hacer primero la vista del html y luego si comienzo con el código. La vista de la página sería algo así para este sencillo ejemplo pero que es aplicable también para una tabla con más datos:
El codigo del HTML si se los dejo para que lo desarrollen, pero este imagén les puede ayudar como guia.

Les muestro en la siguiente imagen parte del código html de la tabla de este ejemplo:

En la parte del Código HTML debemos enlazar los archivos JavaScript (.js), para que se cargue las funciones y poder manipular el DOM. Como se observa en la siguiente imagen hay 3 enlaces a archivos js, por lo que los dos primeros son JavaScript (compilados) para dar un “alert” de JavaScript mucho más amigable (https://sweetalert.js.org/guides).

Ya con esto procedemos a crear el archivo JavaScript necesario para este pequeño tutorial. Llame al archivo tutorial.js pero puede ser cualquiera.

// Aqui hacemos que al iniciar la página lea o carge el botón con su id y función, // y con el evento click llama a la función.
$(document).ready(function(){
    document.getElementById("btn_add").onclick = agregarItem;
}
);
// creamos e iniciamos la variable que va ha contar las filas registradas en la tabla.let cont = 1;
functionagregarItem(){
    // Creamos cuatro variables que van a almacenar la información ingresada desde la página.// Con su id de cada input y con el metodo ".val" podemos tomar el valor digitado en cada campo.let tipo_carro =  document.getElementById("tcarr").value;
    let placa_car = document.getElementById("plac").value;
    let modelo_car = document.getElementById("model").value;
    let mar_car = document.getElementById("marca").value;

    // Hacemos un array con los elementos para luego validar si estan vaciosvar datosCarro = [tipo_carro, placa_car, modelo_car, mar_car];

    // Recorremos el array con los datos del carro ingresado.for(var i in datosCarro){
        // Con este if anidado al for, validamos por cada elemento si no hay datos ingresados.if (datosCarro[i] == "" || datosCarro[i] == null) {
            // Damos un mensaje de alerta si hay elementos vacíos con el método swal.
            swal({title: "Error al agregar!", text: "Hay campos que están vacíos en los datos del carro, revise e inténtelo de nuevo."});

            // Si hay uno que está vacío o nulo con "return" hacemos que termine la función y se inicie nuevamente el proceso. return
        }
    }

   // Aqui construimos con html la fila que se agregará a la tabla y colocamos los valores recogidos en las variables.var filaItem = '<tr id="fila'+cont+'"><td class="align-middle">'+cont+'</button></td>'+
    '<td class="align-middle">'+tipo_carro+'</td>'+'<td class="align-middle">'+placa_car+'</td>'+'<td class="align-middle">'+modelo_car+'</td>'+
    '<td class="align-middle">'+mar_car+'</td></tr>';

    // Llamos la función que limpia los inputs despues de agregar los datos a la tabla.
    clearinputs();

    // Agregamos a la tabla la fila con el metodo "append"document.getElementById("detalleCarro").insertRow(-1).innerHTML = filaItem;
    cont++;
}

functionclearinputs(){
    document.getElementById("tcarr").value = "";
    document.getElementById("plac").value = "";
    document.getElementById("model").value = "";
    document.getElementById("marca").value = "";
}

Les muestro unas imágenes de cómo se vería resultado: