JQ动态添加、删除行。动态添加日历控件。

最新推荐文章于 2024-08-08 16:36:35 发布

gditzmr

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量1k

点赞数

分类专栏： JS/JQ 文章标签：动态添加行动态添加日历控件

本文链接：https://blog.csdn.net/gditzmr/article/details/86542121

版权

JS/JQ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

（1）JQ动态添加行、删除行，参照于以下网址：

https://www.cnblogs.com/kang543418095/p/5950501.html

（2）动态添加日历控件，参照于以下网址：

https://blog.csdn.net/sheng_li/article/details/70859371

本人调试后的html页面如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


   <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
   <script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
   <SCRIPT type="text/javascript">
   $(document).ready(function(){
   //inputFocus();
       $("#addRow").click(function(){
           var rowNum=$(".myTable tr").length;
           var innerHtml="<tr>";
           innerHtml+="<td class='tdNum'>"+rowNum+"</td>";
          innerHtml+="<td class='tdUName'><input type='text' class='employeeName' name='employeeName' value='' /></td>";
          innerHtml+="<td class='tdUBirthday'><input type='text' class='birthday' name='birthday' value='' /></td>";
          innerHtml+="<td class='tdDel'><span>删除</span></td>";
          innerHtml+="</tr>";

          $(".myTable").append(innerHtml);

          inputFocus();
      })

      //删除
      $(".myTable").delegate(".tdDel span","click",function(){
          $(this).parent().parent().remove();
          //重新排序，如果删除的不是最后一行，不重新排序就不能看了~
           $(".myTable tr").each(function(index){
           if(index != 0){
           $(this).children('td').eq(0).text(index);
           }
           });
      })
   })
   //动态添加日历控件
   function inputFocus()
   {
      $(".myTable").delegate(".birthday","focus",function(){
          WdatePicker({dateFmt:"yyyy-MM-dd"});
      })
   }


   </SCRIPT>
   <style type="text/css">
   .myTable{ width:501px; margin:0 auto; border-left:#ccc solid 1px; border-top:#ccc solid 1px; text-align:center; font-size:13px;}
   .myTable tr th{ height:26px;}
   .myTable tr td, .myTable tr th{border-right:#ccc solid 1px; border-bottom :#ccc solid 1px;}

   .myTable tr td input{border:#ccc solid 1px;}

   .myTable tr .tdNum{ width:50px; }
   .myTable tr .tdUName{width:200px;}
   .myTable tr .tdUBirthday{width:200px;}
   .myTable tr .tdDel{width:50px;}

   .myTable tr td.tdNum input{ width:48px; }
   .myTable tr td.tdUName input{ width:180px;}
   .myTable tr td.tdUBirthday input{ width:180px;}
   .myTable tr .tdDel span{ color:blue; cursor:pointer;}

   .submitDiv{ margin-top:20px;}
   </style>

</head>

<body>
<center>
<table class="myTable" border="0" cellspacing="0" cellpadding="0">
   <tr>
       <th class="tdNum">序号</th>
       <th class="tdUName">员工姓名</th>
       <th class="tdUBirthday">生日</th>
       <th class="tdDel">删除</th>
   </tr>
   <tr>
       <td class="tdNum">1</td>
       <td class="tdUName"><input type="text" class="employeeName" name="employeeName" value="" /></td>
       <td class="tdUBirthday"><input type="text" class="birthday" name="birthday" value="" /></td>
       <td class="tdDel"><span>删除</span></td>
   </tr>
</table>

<div class="submitDiv">
   <input type="button" id="addRow" value="添加行" />
</div>


</center>
</body>
</html>