这是一个录入信息的案例。当我点击“录入”的时候,页面数据顿闪后直接没了,检查代码又没有问题,调试也没有报错
//判断非空
btn.onclick = function () {
if (uname.value.trim() == '' || age.value.trim() == '' || salary.value.trim() == '') {
alert('输入内容不能为空')
form.reset()
return
}
//创建节点
let tr = document.createElement('tr')
//设置内容
tr.innerHTML = `<td>${num++}</td>
<td>${uname.value}</td>
<td>${age.value}</td>
<td>${gender.value}</td>
<td>${salary.value}</td>
<td>${city.value}</td>
<td>
<a href="javascript:" class="up">上移</a>
<a href="javascript:" class="delete">删除</a>
<a href="javascript:" class="down">下移</a>
</td>`
//添加节点
tbody.appendChild(tr)
form.reset()
}
//删除 事件委托
tbody.onclick = function (e) {
let tdd = e.target.parentElement.parentElement
if (e.target.className == 'delete') {
tbody.removeChild(tdd)
} else if (e.target.className == 'up') {
tbody.insertBefore(tdd, tdd.perviousElementSibling)
} else if (e.target.className == 'down') {
tbody.insertBefore(tdd, tdd.nextElementSibling.nextElementSibling)
}
}
form是用来定义表单的,我的button按钮是放在form表单里的,如果不阻止默认事件,它就会默认转到action中的页面去了,所以应该添加事件对象来阻止默认事件,所以只需在btn的点击事件中添加e.preventDefault()即可,另外,这条语句也可阻止a标签的默认跳转事件
btn.onclick = function (e) {
e.preventDefault()
if (uname.value.trim() == '' || age.value.trim() == '' || salary.value.trim() == '') {
alert('输入内容不能为空')
form.reset()
return
}