验证信息添加到表格中

最新推荐文章于 2022-07-31 15:30:40 发布

原创最新推荐文章于 2022-07-31 15:30:40 发布 · 360 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
   <head>
       

        <script type="text/javascript">
           function add(){
               clearSpan();
               //给定一个标识符
               var flag = true;
               //获取名称中的值，判断是否为空
               var nameValue = document.getElementById("iname").value;
               var priceValue = document.getElementById("iprice").value;
               var countValue = document.getElementById("icount").value;

               //判断名称是否为空
               if(nameValue == null || nameValue.trim()== "" ){
                   flag = false;//如果验证失败，第一：flag 设置为false 第二给span中给提示
                   document.getElementById("sname").innerHTML = "<font color='red'>不能为空</font>";
               }

               //价格在30-60
               if(!(priceValue >= 30 && priceValue <=60)){
                   flag = false;//如果验证失败，第一：flag 设置为false 第二给span中给提示
                   document.getElementById("sprice").innerHTML = "<font color='red'>价格必须在30-60之间</font>";
               }

               //场次不能为空
               if(countValue == null || countValue.trim()== "" ){
                   flag = false;//如果验证失败，第一：flag 设置为false 第二给span中给提示
                   document.getElementById("scount").innerHTML = "<font color='red'>场次不能为空</font>";
               }

               /*
                  思路：
                  我们调用add方法会返回一个boolean值，如果是true，则通过验证，
                  如果是false则没有通过验证；通过验证的我们在table中才添加，不通过验证，我们不做任何事情，他本身有红色的错误提示
           */
               if(flag){
               //1.创建tr
               var tr = document.createElement("tr");
               //2.创建4个td
               var td1 = document.createElement("td");
               td1.innerHTML= document.getElementById("iname").value;
               var td2 = document.createElement("td");
               td2.innerHTML= document.getElementById("iprice").value;
               var td3 = document.createElement("td");
               td3.innerHTML= document.getElementById("icount").value;
               var td4 = document.createElement("td");
               var date = new Date();
               td4.innerHTML= date.toLocaleString();

               //把td放到父节点tr中
               tr.appendChild(td1);
               tr.appendChild(td2);
               tr.appendChild(td3);
               tr.appendChild(td4);

               //tr放到父节点table中
               document.getElementById("tab").appendChild(tr);
           }
           }

           //清除span标签里面的数据
           function clearSpan(){
                   var arr = document.getElementsByTagName("span");
                   for(var i = 0; i < arr.length; i++){
                       arr[i].innerHTML = "";
                   }
               }





        </script>
   </head>
   <body>
       <table align="center" >
           <tr>
               <td>
                   名称：<input type="text" id="iname" name="uname" />
                   <span id="sname" ></span>
               </td>
           </tr>
           <tr>
               <td>
                   价格：<input type="text" id="iprice" name="uprice" />
                   <span id="sprice"></span>
               </td>
           </tr>
           <tr>
               <td>
               场次：<input type="text" id="icount" name="ucount" />
               <span id="scount"></span>
               </td>

           </tr>
           <tr align="center">
               <td colspan="2">
               <input type="button" value="添加" onclick="add()" />
               </td>
           </tr>

       </table >

       <hr width="35%"/>
       <table align="center" width="30%" cellspacing="0" border="1px" id="tab">
           <tr>
               <th>名称</th>
               <th>价格</th>
               <th>场次</th>
               <th>日期</th>
           </tr>
       </table>

   </body>
</html>