插入表格+隔行变色

最新推荐文章于 2022-12-25 23:27:43 发布

人道烘炉_L

最新推荐文章于 2022-12-25 23:27:43 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/My_emotions_L/article/details/78471279

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           table{
               width: 600px;
               border: solid 1px;
               text-align: center;
               display: none;
           }



       </style>

       <script src="../js/jquery-1.11.1.js"></script>
       <script>
           $(function(){

               //给添加按钮添加点击事件
               $("#add").click(function(){

                   $("table")[0].style.display="block"; //当点击添加按钮--->table显示


                   $("table").addClass("current_tab");
                   //获取框中的值
                   var name= $("#name")[0].value;//$("#name")[0].
                   var age=$("#age").val();      //jq框中的value值 val()--->是jquery的方法
                   var birth=$("#birth").val();

                   //创建元素
                   var tr=$("<tr>");
                   //创建td
                   var td1=$("<td>").html(name);
                   var td2=$("<td>").html(age);
                   var td3=$("<td>").html(birth);
                   var td4=$("<td><button>删除</button></td>");
                   tr.append(td1);
                   tr.append(td2);
                   tr.append(td3);
                   tr.append(td4);
                   $("tbody").append(tr);

                   //隔行变色
                   $("tbody tr:odd").css("background-color","red");

                   $("tbody tr:even").css("background-color","yellow");

                   console.log("button--->",$("button").length);
                   $("td button").click(function(){
                       $(this).parent().parent().remove();
                       //隔行变色
                       $("tbody tr:odd").css("background-color","red");

                       $("tbody tr:even").css("background-color","yellow");

                       //查询tbody是否有内容,么有内容整个表头隐藏
                       var trs= $("tbody").children("tr");
                       if(trs.length==0){
                           $("table")[0].style.display="none";
                       }
                   });
               });
           });

       </script>
   </head>
   <body>
       姓名:<input id="name" />
       年龄:<input id="age" />
       生日:<input id="birth" />
       <input type="button" value="添加" id="add" />

       <table border="1px solid">
           <thead>
               <tr>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>生日</th>
                   <th> 删除</th>
               </tr>
           </thead>
           <tbody>

           </tbody>
       </table>
   </body>
</html>