表單元素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>