需求
- 提交多个内容时,除第一行外,行的背景颜色发生隔行颜色交替
- 没有完整输入信息提交时候会弹出对话框,提示用户填写完整
html部分代码
建议:提交按钮使用button标签,因为在js获取表单值的时候可以直接通过类名获取
请输入姓名:<input type="text">
<br>
请输入邮箱:<input type="email" >
<br>
请输入手机:<input type="text" >
<br>
请输入地址:<input type="text">
<br>
<button id="btn">提交</button>
<br>
<table width=800px border="1" cellspacing=0 id="table">
<tr class="tr1">
<td>姓名</td>
<td>邮箱</td>
<td>手机</td>
<td>地址</td>
</tr>
<tr style="background-color:#FFF766;">
<td>小七</td>
<td>12345@qq.com</td>
<td>123456</td>
<td>XXX小区</td>
</tr>
</table>
css部分代码
<style>
.tr1 {
background-color:#92D050;
color: white;
}
td {
text-align: center;
}
</style>
效果图:
js代码
- 获取元素
- 注册点击事件
- 判断输入的值是否为空(注意:获取表单值是value): 如果其中有一个或多个文本框没有输入就会弹出提示对话框;否则就执行后面的代码
- 如果信息填写完整,在table标签里创建新的行,遍历表单长度,根据表单的个数创建新的单元格,将表单的值传给单元格,然后将新的单元格添加到行
- 清除表单的值
- 遍历行数,修改背景色
我是先判断在去根据需求去写代码,但是这个案例也可以把判断条件写在循环里面
<script>
var input = document.getElementsByTagName("input")
var table = document.getElementById("table")
var btn = document.getElementById("btn");
var tr = document.getElementsByTagName("tr")
btn.onclick = function () {
// 判断输入的内容是否为空
if ((input[0].value && input[1].value && input[2].value && input[3].value)=="") {
alert("请输入正确内容")
} else {
// 在table标签里创建新的行
var newTR = document.createElement("tr");
table.appendChild(newTR);
// 遍历表单长度
for (var i = 0; i < input.length; i++) {
// 根据表单的个数创建新的单元格和文本节点,不常用
var newTD = document.createElement("td");
// var newText = document.createTextNode(input[i].value);
// newTD.appendChild(newText);
newTD.innerText = input[i].value;
newTR.appendChild(newTD);
// 移出表单的值
input[i].value = ""
}
}
// 遍历行
for(let i = 0; i<tr.length; i++){
//因为表格第一行颜色是固定的,所以从第二行开始颜色交替,根据伪数组的下标判断
if((i+1)%2==1){
tr[i+1].style.backgroundColor = "#FFF766"
} else{
tr[i+1].style.backgroundColor = "#FFB27D"
}
}
}
</script>
运行结果:
没有输入,直接提交
输入多行的结果: