javascript - 事件 onclick 添加表,但如果已经退出,则再次单击时删除
问题描述
我有一些输入和一个 onclick 按钮,当单击按钮时,它会将输入的值保存在表格中,但是如果再次单击它,它会在旧表格下方创建另一个表格。每次创建新表时,我都想删除旧表。
这是html
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
这是javascript
function Guardar() {
datosJSON.nombre = document.getElementById('nombre').value;
datosJSON.edad = document.getElementById('edad').value;
datosJSON.email = document.getElementById('email').value;
datosJSON.telefono = document.getElementById('telefono').value;
localStorage.setItem('datosSolictante', JSON.stringify(datosJSON));
} // Cierre funcion guardar
function checkData() {
console.log(todaInfo);
console.log(((nombre.value) && (edad.value) && (email.value) && (telefono.value)));
if ((nombre.value) && (edad.value) && (email.value) && (telefono.value)) {
console.log(todaInfo);
todaInfo.innerHTML = ` ${nombre.value} ${edad.value} ${email.value} ${telefono.value} `;
}} // Cierre funcion checkData
window.onload = function() {
let todaInfo = document.getElementById('todaInfo');
let info = document.getElementById('info');
console.log(todaInfo);
console.log(info);
todaInfo.innerHTML = '';
var guardado = document.getElementById('guardado');
guardado.addEventListener("click", function () {
if (checkData) {
guardado.innerHTML = `Guardado`;
}
});
};
guardado.addEventListener("click", function() {
if ((nombre.value.length > 0) && (edad.value.length > 0) && (email.value.length > 0) && (telefono.value.length > 0)) {
info.innerHTML += "<th>Informacion del cliente</th><tr><td>Nombre: " + nombre.value + "</tr></td><tr><td>Edad: " + edad.value + "</tr></td><tr><td>Email: " + email.value + "</tr></td><tr><td>Telefono: " + telefono.value + "</td></tr>";
}
nombre.value = "";
edad.value = "";
email.value = "";
telefono.value = "";
});
解决方案
你只需要设置info.innerHTML
. 当前,您innerHTML
每次单击按钮时都在添加。
if ((nombre.value.length > 0) && (edad.value.length > 0) && (email.value.length > 0) && (telefono.value.length > 0)) {
info.innerHTML = "<th>Informacion del cliente</th><tr><td>Nombre: " + nombre.value + "</tr></td><tr><td>Edad: " + edad.value + "</tr></td><tr><td>Email: " + email.value + "</tr></td><tr><td>Telefono: " + telefono.value + "</td></tr>";
}
推荐阅读
- python - 将 .so 文件与 pyspark 一起使用
- terraform - 为 cosmosDB 创建专用终结点会自动生成新的网络接口。如何使用我创建的网络接口?
- r - 无需替换的采样 - dplyr
- python - 为什么计算列表的行为与书面列表不同
- angular - 如何在没有 disabled() 函数的情况下在 Angular8 中使 FomrGroup 只读?
- ios - WKWebView 在 Xamarin 的 iOS 12 下不会显示 doc、docx、png、txt
- php - TYPO3 分页首页
- javascript - 非中断空间在 vue 模板中呈现为常规空间
- php - (概念混淆)App\User::role 必须返回一个关系实例(雄辩的关系工作,但查询生成器不工作)
- node.js - 无法更新云 Firestore 中的文档