Untitled

<!DOCTYPE html>
<html>

<head>
    <style>
        form {
            width: 40%;

            margin-left: 1.3em;
            border: 1px solid blue;
            border-radius: 10px;
            padding: 2em;

            background-color: rgba(133, 199, 201, 0.12);
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            text-align: left;
            padding: 10px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }

        th {
            background-color: blue;
            color: white;
        }
    </style>
    <script type="text/javascript" language="JavaScript">
        function SubmitForm() {
            var formData = readFormData();
            var tabla = document.getElementById("ListaDeInstrumentos");
            var buscar = doSearch();
            if (formData["ID"] != "" && buscar === false) {
                var NewRow = tabla.insertRow();
                cell1 = NewRow.insertCell(0);
                cell1.appendChild(document.createTextNode(formData["ID"]));
                cell2 = NewRow.insertCell(1);
                cell2.appendChild(document.createTextNode(formData["Observaciones"]));
                cell3 = NewRow.insertCell(2);
                cell3.appendChild(document.createTextNode(formData["Tipo"]));
                // si uso el form data no funciona :(
                document.getElementById("ID").value = "";
                document.getElementById("Observaciones").value = "";
                document.getElementById("Tipo").value = "";
            }
        }
        function readFormData() {
            var formData = {};
            formData["ID"] = document.getElementById("ID").value;
            formData["Observaciones"] = document.getElementById("Observaciones").value;
            formData["Tipo"] = document.getElementById("Tipo").value;
            return formData;
        }
        function doSearch() {
            var tabla = document.getElementById("ListaDeInstrumentos");
            const search = document.getElementById("ID");
            let found = false;
            if (tabla.rows[1] !== undefined) {
                const cellsOfRow = tabla.rows[1].getElementsByTagName('td');

                for (let j = 0; j < cellsOfRow.length && !found; j++) {
                    const compareWith = cellsOfRow[j].innerHTML.toLowerCase();
                    if (search = compareWith) {
                        found = true;
                    }
                }
            }
            return found;
        }
    </script>
    <title>
        Trabajo Proyecto
    </title>
</head>

<body>

    <table>
        <tr>
            <td>
                <form onsubmit="event.preventDefault(); SubmitForm();" autocomplete="off">
                    <div>
                        <label>ID</label>
                        <input type="number" name="ID" id="ID">
                    </div>
                    <div>
                        <label>Tipos</label>
                        <select class="form-control" id="Tipo">
                            <option>Piano</option>
                            <option>Violín.</option>
                            <option>violonchelo</option>
                            <option>guitarra</option>
                        </select>
                    </div>
                    <div>
                        <label>Observaciones</label>
                        <input type="text" maxlength="255" name="Observaciones" id="Observaciones">
                    </div>
                    <div>
                        <input type="Submit" value="Submit">
                    </div>
                </form>
            </td>
            <td>
                <table id="ListaDeInstrumentos">
                    <thead>
                        <tr>
                            <th id="th_id">ID</th>
                            <th>Tipo</th>
                            <th>Observaciones</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</body>