zoukankan      html  css  js  c++  java
  • 利用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=' 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=' 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

          

  • 相关阅读:
    PHP 大小写转换、首字母大写、每个单词首字母大写转换相关函数
    【论文学习4】BiSample: Bidirectional Sampling for Handling Missing Data with Local Differential Privacy
    【论文学习3】Local Differential Privacy for Deep Learning
    【论文学习2】 Differential Privacy Reinforcement Learning
    深度学习中的优化算法
    Spatial crowdsourcing
    “pip install tensorflow ”出现错误
    python或pip'不是内部或外部命令”
    pip install torch出现错误
    打不开gitHub的解决方法
  • 原文地址:https://www.cnblogs.com/PurpleDream/p/3026569.html
Copyright © 2011-2022 走看看