js原生实现向表格提交对应内容

需求

1. 提交多个内容时，除第一行外，行的背景颜色发生隔行颜色交替
2. 没有完整输入信息提交时候会弹出对话框，提示用户填写完整

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代码

1. 获取元素
2. 注册点击事件
3. 判断输入的值是否为空（注意：获取表单值是value）： 如果其中有一个或多个文本框没有输入就会弹出提示对话框；否则就执行后面的代码
4. 如果信息填写完整，在table标签里创建新的行，遍历表单长度，根据表单的个数创建新的单元格，将表单的值传给单元格，然后将新的单元格添加到行
5. 清除表单的值
6. 遍历行数，修改背景色
   我是先判断在去根据需求去写代码，但是这个案例也可以把判断条件写在循环里面

<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>

运行结果：
没有输入，直接提交

输入多行的结果：