利用js为table添加行
前几天在项目中，用到了一些前端的小技巧，一个是我现在要写的，还有一个就是三个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下失效了，需要的话所以你可以替代为文本框。
源代码：https://files.cnblogs.com/PurpleDream/%E8%A1%A8%E6%A0%BC%E6%B7%BB%E5%8A%A0%E8%A1%8C.rar
