标签：
废话不多说，先上code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link href="My97DatePicker/skin/default/datepicker.css" rel="stylesheet" /> 8 <script src="scripts/jquery-1.9.1.min.js"></script> 9 <script src="My97DatePicker/WdatePicker.js"></script> 10 <style> 11 table { 12 border: 1px solid blue; 13 border-collapse: collapse; 14 } 15 16 table td, th { 17 border: 1px solid blue; 18 } 19 </style> 20 <script> 21 function Addtr(tbname) { 22 var table = $(tbname); 23 var tbody = table.find("tbody"); 24 var trRows = tbody.find("tr"); 25 var trRowsLength = trRows.length; 26 var trRow = tbody.find("tr:eq(0)").html(); 27 var html="<tr id=‘num_" + trRowsLength + "‘>" + trRow + "</tr>"; 28 tbody.append(html); 29 } 30 function Gettime(t) { 31 var td = $(t).parent(); 32 var tr = td.parent(); 33 var num = tr.attr("id").split("_")[1]; 34 var text = $(t).prev(); 35 var thisname = text.attr("name"); 36 text.attr("id", thisname + "_" + num + "_" + (td.index() + 1)); 37 WdatePicker({ el: text.attr("id"), dateFmt: ‘yyyy-MM-dd HH:mm:ss‘ }); 38 } 39 </script> 40 </head> 41 <body> 42 <input id="d11" type="text" onclick="WdatePicker()" /> 43 <table style="width:100%" id="tbMy97" collapse="1"> 44 <thead> 45 <tr><th colspan="5"><input type="button" value="新增" onclick="Addtr(tbMy97)" /></th></tr> 46 <tr> 47 <th>标题1</th> 48 <th>标题2</th> 49 <th>标题3</th> 50 <th>标题4</th> 51 <th>标题5</th> 52 </tr> 53 </thead> 54 <tbody> 55 <tr style="display:none"> 56 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 57 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 58 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 59 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 60 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 61 </tr> 62 <tr id="num_1"> 63 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 64 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 65 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 66 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 67 <td><input type="text" name="startime" /><input type="button" value="My97" onclick="Gettime(this)" /></td> 68 </tr> 69 </tbody> 70 <tfoot> 71 <tr><th colspan="5">这是脚，你可以添加上传文件功能</th></tr> 72 </tfoot> 73 </table> 74 </body> 75 </html>
这个demo 直接可以用，已调试过。
首先说下这里的table新增一行，
1 function Addtr(tbname) { 2 var table = $(tbname); 3 var tbody = table.find("tbody"); 4 var trRows = tbody.find("tr"); 5 var trRowsLength = trRows.length; 6 var trRow = tbody.find("tr:eq(0)").html(); 7 var html="<tr id=‘num_" + trRowsLength + "‘>" + trRow + "</tr>"; 8 tbody.append(html); 9 }
这里的tbname传的是要新增一行的table的id，然后得到这个table的tbody，找到隐藏的那一行的html，在tbody里面append下就可以，简单的写法就是
1 function addTr(tableId) { 2 var tbody = $(tableId).find("tbody"); 3 var trRow = tbody.find("tr:eq(0)").html(); 4 var html = "<tr>" + trRow + "</tr>"; 5 tbody.append(html); 6 }
这样就实现了新增一行，比拼接字符串好多了。这个还可以复用；
上面多写了几行，主要是My97插件需要用到id，这里新增的文本框没有id，我们就创建一个id给它；
Gettime这个function 主要是要得到点击按钮旁边的text的id，然后赋给WdatePicker({el:id});
这样就实现了动态生成的文本框也可以用My97啦。
jquery table新增一行，并且绑定时间事件（My97）
标签：
原文地址：http://www.cnblogs.com/SandSIT/p/5723010.html
