使用jquery动态往table添加tr

来源：互联网发布：淘宝手游充值编辑：程序博客网时间：2024/05/17 07:00

[html] view plain copy
 
<table cellpadding=10 id="tabId" >  
        <tr>  
            <td>  
             <form:label class="control-label" path="projectName">  
                 <spring:message code="project.name" />  
            </form:label>  
           </td>  
          <td colspan="4">  
            <form:input style="width:450px;" path="projectName" readonly="true"/>   
             <form:hidden  path="projectNumber" />   
         </td>  
        </tr>  
</table>  

[html] view plain copy
 
<div>  
    <button class="btn btn-info btn-green" id="addYear">  
        <i class="icon-ok bigger-110"></i> 增一年  
    </button>  
</div>      

[html] view plain copy
 
<script type="text/javascript">  
      var i = 0;  
        
      $(function(){           
          $("#addYear").click(function(){         
              var nowYear = $("#nowYear").val();   
              if(i == 0) {  
                 i++;  
                 var nextYear = nowYear + 1;  
                 $str = '';  
                 $str += "<tr>";  
                 $str += "      <td>";  
                 $str += "          <form:label class=\"control-label\" path=\"plan.nextPlanCompleteWork\">";  
                 $str += "             <spring:message code=\"plan.planCompleteWork\" />";  
                 $str += "          </form:label>";  
                 $str += "      </td>";  
                 $str += "      <td>";  
                 $str += "          <form:input path=\"plan.nextPlanCompleteWork\"  />";  
                 $str += "          <site:required /><form-extension:errors path=\"plan.nextPlanCompleteWork\" cssClass=\"error\" />";  
                 $str += "      </td>";  
                 $str += "      <td>";  
                 $str += "          <form:label class=\"control-label\" path=\"plan.nextPlanCompleteFinancial\" >";  
                 $str += "             <spring:message code=\"plan.planCompleteFinancial\" />";  
                 $str += "          </form:label>";  
                 $str += "      </td>";  
                 $str += "      <td>";  
                 $str += "          <form:input path=\"plan.nextPlanCompleteFinancial\"  />";  
                 $str += "          <site:required /><form-extension:errors path=\"plan.nextPlanCompleteFinancial\" cssClass=\"error\" />";  
                 $str += "      </td>";  
                 $str += "</tr>";  
                   
                 $("#tabId").append($str);// 添加输入的值到tabId末尾   
                   
              } else if(i == 1) {  
                 i++;  
                 var afterYear = nowYear + 2;  
                 $str = '';  
                 $str += "<tr>";  
                 $str += "      <td>";  
                 $str += "          <form:label class=\"control-label\" path=\"plan.afterPlanCompleteWork\">";  
                 $str += "             <spring:message code=\"plan.planCompleteWork\" />";  
                 $str += "          </form:label>";  
                 $str += "      </td>";  
                 $str += "      <td>";  
                 $str += "          <form:input path=\"plan.afterPlanCompleteWork\"  />";  
                 $str += "          <site:required /><form-extension:errors path=\"plan.afterPlanCompleteWork\" cssClass=\"error\" />";  
                 $str += "      </td>";  
                 $str += "      <td>";  
                 $str += "          <form:label class=\"control-label\" path=\"plan.afterPlanCompleteFinancial\" >";  
                 $str += "             <spring:message code=\"plan.planCompleteFinancial\" />";  
                 $str += "          </form:label>";  
                 $str += "      </td>";  
                 $str += "      <td>";  
                 $str += "          <form:input path=\"plan.afterPlanCompleteFinancial\"  />";  
                 $str += "          <site:required /><form-extension:errors path=\"plan.afterPlanCompleteFinancial\" cssClass=\"error\" />";  
                 $str += "      </td>";  
                 $str += "</tr>";   
                   
                 $("#tabId").append($str);// 添加输入的值到tabId末尾           
              }  
          });          
      });// 加载结束  
    </script>  

0 0