js实现动态表格

来源：互联网发布：微信群如何做淘宝客编辑：程序博客网时间：2024/05/21 10:33

~动态表格,实现动态添加行/删除行/鼠标移到行上后样式变为灰底白字

动态表格中的全选/反选/全不选功能

动态表格中,双击单元格,变成修改状态,同时文本框中的内容默认是单元格中的内容

<html>
   <head>
       <title>home_work_3</title>
       <script language="javascript">
           function add(){
               //一行每列的东西
               var input_sle = document.createElement("input");
               input_sle.type = "checkbox";
               input_sle.name = "selec";


               var name = document.getElementById("name").value;
               var mail = document.getElementById("mail").value;
               var num = document.getElementById("num").value;

               var input_btn = document.createElement("input");
               input_btn.type = "button";
               input_btn.value = "delete";
               input_btn.onclick = function (){
                   del(this);
               };

               //创建五个列
               var td_1 = document.createElement("td");
               td_1.appendChild(input_sle);

               var td_2 = document.createElement("td");
               td_2.innerText =name;
               td_2.ondblclick = function(){
                   dbclk(this);
               }

               var td_3 = document.createElement("td");
               td_3.innerText =mail;
               td_3.ondblclick = function(){
                   dbclk(this);
               }

               var td_4 = document.createElement("td");
               td_4.innerText =num;
               td_4.ondblclick = function(){
                   dbclk(this);
               }

               var td_5 = document.createElement("td");
               td_5.appendChild(input_btn);

               //创建行
               var tr = document.createElement("tr");
               tr.appendChild(td_1);
               tr.appendChild(td_2);
               tr.appendChild(td_3);
               tr.appendChild(td_4);
               tr.appendChild(td_5);

               //行appendChild table
               var tbl = document.getElementById("tbl");
               tbl.appendChild(tr);

           }

           function del(obj){
               var tr = obj.parentNode.parentNode;
               var tbl = document.getElementById("tbl");
               tbl.removeChild(tr);

           }

           function checkboxsle(num){
               var checkboxes = document.getElementsByName("selec");
               for(var i = 0;i < checkboxes.length;i++){
                   switch (num){
                       case 1: checkboxes[i].checked = true;break;
                       case 2: checkboxes[i].checked =!checkboxes[i].checked;break;
                       default: checkboxes[i].checked =false;
                   }
               }
           }

           function dbclk(obj){
               var text_obj = obj.firstChild;
               var input_obj = document.createElement("input");
               input_obj.type = "text";
               input_obj.value = text_obj.nodeValue;
               input_obj.size = "15";
               obj.replaceChild(input_obj,text_obj);
               input_obj.focus();
               input_obj.onblur = function(){
                   onblurInput(obj,input_obj);
               };
           }

           function onblurInput(obj,input){
               var text_node = document.createTextNode(input.value);
               obj.replaceChild(text_node,input);
           }
       </script>
   </head>
   <body>
       姓名:<input type="text" id="name"/>  
       邮箱:<input type="text" id="mail"/>  
       编号:<input type="text" id="num"/>  
           <input type="button" value="add" onclick="add()"/>
           <hr></hr>

           <table align="center" cellpadding="0" cellspacing="0" border="1" width="50%">
               <tbody id="tbl" align="center">
                   <tr>
                       <th>选择</th>
                       <th>姓名</th>
                       <th>邮箱</th>
                       <th>编号</th>
                       <th>操作</th>
                   </tr>
                   <tr>
                       <td><input type="checkbox" name="selec"></td>
                       <td ondblclick="dbclk(this)">sue</td>
                       <td>gmail</td>
                       <td>9999</td>
                       <td><input type="button" value="delete" onclick="del(this)"></td>
                   </tr>
               </tbody>
           </table>
           <hr></hr>
           <table align="center">
               <tbody>
                   <tr>
                       <td>
                           <input type="button" value="全选" onclick = "checkboxsle(1)"/>&nbsp
                           <input type="button" value="反选" onclick = "checkboxsle(2)"/>&nbsp
                           <input type="button" value="全不选" onclick = "checkboxsle(3)"/>
                       </td>
                   </tr>
               </tbody>
           </table>
   </body>
</html>

0 0