废话不多说，先上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啦。
时间： 2024-07-30 11:11:24