表单元素input的值动态获取到表格案例

方法一：自己原创

 style代码

<style>
        .table{
            width: 600px;
        }
        table{
            border-collapse: collapse;
            width: 100%;
        }
        table,td,th {
            border: solid 1px #ccc;
            text-align:center;
        }
        table thead{
            background-color: #8F3FE5;
        }
    </style>

 盒子代码

 请输入姓名：<input type="text">
    <br>
    请输入手机：<input type="text">
    <br>
    请输入邮箱：<input type="text">
    <br>
    请输入地址：<input type="text">
    <br>
    <button id="bt">添加</button>
    <div class="table">
        <table>
            <thead>
            <tr>
                <th width="15%">姓名</th>
                <th width="40%">邮箱</th>
                <th width="30%">手机</th>
                <th width="15%">地址</th>
            </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
    </div>

 script代码

<script>
        var inputs=document.getElementsByTagName('input');
        var tbody=document.getElementById('tbody');
        var bts=document.getElementById('bt');
        bts.onclick=function () {
            var trs=document.createElement('tr');
            for(i=0;i<inputs.length;i++){
                if(inputs[i].value===""){
                    alert("我是一个警告框！");
                    break;
                }else
                    {
                    var tds=document.createElement('td');
                    tds.innerText=inputs[i].value;
                    trs.appendChild(tds);
                    //console.log(inputs[i].value);
                }
            }
            for(i=0;i<inputs.length;i++){
                inputs[i].value="";
            }
            if(tbody.children.length%2===0){
                trs.style.backgroundColor='yellow';
            }else {
                trs.style.backgroundColor='red';
            }
            tbody.appendChild(trs);
           }
    </script>

方法二参考：

style代码：

 <style>
    table{
        border-collapse: collapse;
    }
    
    </style>

盒子代码：

姓名: <input type="text" id="username"><br>
    邮箱: <input type="text" id="email"><br>
    电话: <input type="text" id="phone"><br>
    地址: <input type="text" id="address"><br>
    <button id="btn">添加</button>

script代码：

 <script>
        //1. 表格动态创建出来
        // 1.1 创建表格的基本机构
        var table = document.createElement('table');
        var thead = document.createElement('thead');
        table.appendChild(thead);
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);

        // 1.2 完成表头部分
        var str = '<tr><th>姓名</th><th>邮箱</th><th>电话</th><th>地址</th></tr>';
        thead.innerHTML = str;

        //1.3 给table加样式
        table.border = '1px';
        thead.style.backgroundColor = 'purple';

        //把table添加到页面上
        document.body.appendChild(table);



        //2. 点击添加按钮,将表单中的内容添加到表格中(判断是否有未填写的,如果有就提示)
        // 2.1 获取元素 btn input 
        var btn = document.getElementById('btn');
        var inputs = document.getElementsByTagName('input');
        var index = 0; //用于存储tbody中有几行了
      
        // 2.2 给按钮注册点击事件 
        btn.onclick = function(){
        var arr = []; //用于存储用户输入的信息
        
        // 2.3 在事件处理函数中,获取input里面的值 
        // 2.3.1 由于直接获取了四个input,所以需要遍历inputs,获取里面的四个值,并且存储到一个数组中
            Array.prototype.forEach.call(inputs, function(item){
                arr.push(item.value);
            });

            console.log(arr);
        // 2.4 判断是否有空值,如果有提示,如果没有进行下一步
            var result = arr.some(function(item){
                //如果item.length == 0 证明有空的input
                return item.length == 0;
            })

            // 如果result是true,证明有空的
            if(result){
                alert('请您输入完整');
                // return;
            }else{
                  // 2.5 根据用户输入的信息,创建表体中一行的内容,添加到表格中
                //   console.log('创建表格');
                var tr = document.createElement('tr');
                arr.forEach(function(item){
                    var td = document.createElement('td');
                    td.innerText = item;
                    tr.appendChild(td);
                })
                tbody.appendChild(tr);
                //2.6 如果添加表格完成应该清空input里面的文本
                Array.prototype.forEach.call(inputs, function(item){
                 item.value = '';
                });

                //2.7 给tbody中的每一行加隔行变色
                if(index % 2 == 0){
                    tr.style.backgroundColor = 'pink';
                }else{
                    tr.style.backgroundColor = 'red';
                }
                //为了隔行变色,添加完成之后,给index++
                index++;

            }
      
        }
     


    
    
    
    </script>