前幾天在項目中，用到了一些前端的小技巧，一個是我現在要寫的，還有一個就是三個select的聯動。我寫這篇博客的目的是：1.供自己以后隨時查閱用 2.希望對他人也有所幫助，因為總有還不會的。 這個話題雖然網上也有人寫過。但我爭取把這篇博客寫的更詳細些。
先來個效果圖：我最終想實現的就是當點擊添加時，table當前最后一行下面添加新的一行。
這個其實還滿簡單的，主要會用到js中的一些操縱table的tr和td的方法，但第一次用的人往往會遇到一些小問題。所以請看代碼~
HTML代碼：
1 <body> 2 <div class="DIVoverflow"> 3 <table width="100%"> 4 <tr> 5 <td align="right"> 6 <input type="button" value="添加" class="button_add" onclick="javascript:addRow()"> 7 </td> 8 </tr> 9 <tr> 10 <td align="center"> 11 <table id="list_table" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #9AC0CD;" class=""> 12 <tr style="background-color: #f7f7f7"> 13 <th>序號</th> 14 <th>處理時限</th> 15 <th>相關要求</th> 16 <th>責任人</th> 17 </tr> 18 <!-- <c:forEach items="${event.limitList}" var="limit" varStatus="status"> 19 <tr> 20 <td>${status.count}</td> 21 <td><input name='limit_time' value='<fmt:formatDate pattern="yyyy-MM-dd" value="${limit.limit_time}"/>' type='text' class='Wdate' onfocus='WdatePicker()' style='width: 100px'/></td> 22 <td><input name='limit' value='${limit.limit}' class='input_M'/></td> 23 <td><select name='fk_user_id' class='select_S'> 24 <option value=''>請選擇...</option> 25 <c:forEach items='${userList}' var='user'> 26 <option value='${user.id}' <c:if test="${user.id eq limit.fk_user_id}">selected</c:if>>${user.loginName}</option> 27 </c:forEach></select></td> 28 </tr> 29 </c:forEach> --> 30 </table> 31 </td> 32 </tr> 33 </table> 34 </div> 35 </body>
在這段代碼中，我定義了了一個添加按鈕和一個帶表頭的table。並且為添加按鈕添加了一個click事件響應：addRow()函數。
JS代碼：
1 <script type="text/javascript"> 2 function addRow() { 3 //原來的行數 比如：此處獲得表格的行數是5，則每一行對應的index是0~4，所以下面在insertRow時，使用的是表格的當前行數 4 var currentRows = document.getElementById("list_table").rows.length; 5 var insertTr = document.getElementById("list_table").insertRow(currentRows); 6 var insertTd = insertTr.insertCell(0); 7 insertTd.style.textAlign="center"; 8 insertTd.innerHTML = currentRows; 9 10 insertTd = insertTr.insertCell(1); 11 insertTd.style.textAlign="center"; 12 insertTd.innerHTML = "<input name='limit_time' value='' type='text' class='Wdate' onfocus='WdatePicker()' style='width: 100px'/>"; 13 14 insertTd = insertTr.insertCell(2); 15 insertTd.style.textAlign="center"; 16 insertTd.innerHTML = "<input id='limit"+currentRows+"' name='limit' value='' class='input_M'/>"; 17 18 insertTd = insertTr.insertCell(3); 19 insertTd.style.textAlign="center"; 20 insertTd.innerHTML = "<select id='user"+currentRows+"' name='fk_user_id' class='select_S'>"+ 21 "<option value=''>請選擇...</option>" + 22 "<c:forEach items='${userList}' var='user'>" + 23 "<option value='${user.id}'>${user.loginName}</option>" + 24 "</c:forEach></select>" ; 25 } 26 </script>
結合上面的js的代碼，我們可以看出：
1.先利用getElementById獲得table。之后訪問它的rows的屬性，最終獲得length的長度。對於這個長度的使用，我在上面代碼的注釋中已經寫明！
2.我們利用insertRow()這個js方法在最下面插入新的一行tr。
3.我們利用insertCell插入四個td，對應表的四列。
4.訪問每個td的innerHTML屬性，我給第一個td中添加的是序號，第二個td中添加的是一個日期控件，第三個td添加的是一個文本框，第四個td添加的是一個select。
其實感覺也沒什么好說的了。。。。你運行一遍就什么都明白了，附上效果圖：
PS：我們用的這個日期控件是js編寫的，我剛才簡單試了下，ie下沒問題，chrome下失效了，需要的話所以你可以替代為文本框。
源代碼：http://files.cnblogs.com/PurpleDream/%E8%A1%A8%E6%A0%BC%E6%B7%BB%E5%8A%A0%E8%A1%8C.rar