Tengo el siguiente segmento de código que toma la entrada del usuario de un formulario HTML y luego lee un archivo CSV y toma los datos correspondientes para mostrarlos en mi sitio web. Si envío otro 'término de búsqueda' después del inicial en mi formulario, agrega la nueva fila de datos del archivo csv a la página, y quiero que se reemplace en su lugar. Sin embargo, cuando intento reemplazar la fila, todos mis datos desaparecen.
function submitForm(){ nameValue = document.getElementById("searchTerm").value; //document.getElementById("display-results").innerHTML = nameValue; location.href = "#page-3"; function arrayToTable(tableData) { var table = $('<table></table>'); $(tableData).each(function (i, rowData) { var row = $('<tr></tr>'); $(rowData).each(function (j, cellData) { if (cellData == nameValue) { row.append($('<td>'+rowData[1]+'</td>')); } }); table.append(row); }); return table; } $.ajax({ type: "GET", url: "mainFile.csv", success: function (data) { parsed = Papa.parse(data).data; $('#display-results').append(arrayToTable(Papa.parse(data).data)); } }); }Como puede ver en la imagen, agrega el contenido en lugar de reemplazar la primera matriz.
Recuerde reemplazar solo la tabla, no todo el elemento de visualización de resultados (excepto la primera vez que crea la tabla).
if($('#display-results table').length === 0) // append if you haven't built the table yet $('#display-results').append(arrayToTable(Papa.parse(data).data)); else $('#display-results table').replaceWith(arrayToTable(Papa.parse(data).data));