使用jquery动态往table添加tr

[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>