jquery动态往table添加tr

本文介绍了如何在项目中调整年度预算,包括增加一年预算、输入计划完成工作和财务目标,以及添加后续年度的预算调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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



<div>
	<button class="btn btn-info btn-green" id="addYear">
		<i class="icon-ok bigger-110"></i> 增一年
	</button>
</div>	



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


### 回答1: 使用jQuery可以通过以下步骤动态table添加行: 1. 创建一个新的行元素,可以使用jQuery的`$('<tr>')`方法来创建一个新的行元素。 2. 在新的行元素中添加需要显示的数据,可以使用jQuery的`append()`方法来添加数据。 3. 将新的行元素添加table中,可以使用jQuery的`append()`方法将新的行元素添加table中。 示例代码如下: ``` // 获取table元素 var table = $('#myTable'); // 创建新的行元素 var newRow = $('<tr>'); // 在新的行元素中添加数据 newRow.append($('<td>').text('John')); newRow.append($('<td>').text('Doe')); newRow.append($('<td>').text('25')); // 将新的行元素添加tabletable.append(newRow); ``` 以上代码会在名为`myTable`的table添加一行数据,该行数据包含三列,分别为`John`、`Doe`和`25`。 ### 回答2: jQuery是一种非常流行的JavaScript库,它为网页开发带来了许多便利,包括动态向HTML表格中添加行。下面将介绍如何使用jQuery动态添加表格行。 首先,我们需要创建一个空的HTML表格,并指定一个ID。例如: ```html <table id="myTable"> <thead> <tr> <th>列名1</th> <th>列名2</th> <th>列名3</th> </tr> </thead> <tbody> </tbody> </table> ``` 接下来,在JavaScript中使用jQuery选择器来选择我们新建的表格: ```javascript var table = $("#myTable"); ``` 然后,我们可以使用jQuery的append()方法向表格中添加行。例如,下面代码将向表格中添加一行: ```javascript table.find('tbody').append('<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>'); ``` 在这个例子中,我们使用了jQuery的find()方法来选择表格的tbody元素,因为我们只想向表格的主体中添加行(即忽略表头)。然后,使用append()方法来向tbody元素添加一个包含三个单元格的行,每个单元格中包含一些内容。 如果我们需要每次添加多行,可以使用一个for循环来迭代添加: ```javascript for (var i = 0; i < data.length; i++) { table.find('tbody').append('<tr><td>' + data[i].value1 + '</td><td>' + data[i].value2 + '</td><td>' + data[i].value3 + '</td></tr>'); } ``` 在这个例子中,我们假设data是一个包含多行数据的数组,并迭代使用一个for循环将每个数据行添加到表格中。 最后,我们可以把所有这些代码放在一个函数中,以方便随时调用: ```javascript function addTableRow(table, rowData) { table.find('tbody').append('<tr><td>' + rowData.value1 + '</td><td>' + rowData.value2 + '</td><td>' + rowData.value3 + '</td></tr>'); } ``` 现在,每当我们需要向表格中添加新行,只需调用这个函数,并将tabe和rowData作为参数传入即可。 总之,使用jQuery动态向表格中添加行非常容易,只需使用jQuery的append()方法即可实现。但是,我们需要指定正确的表格和行数据,在此之前请确保正确地理解了以上例子。 ### 回答3: jQuery是一种非常流行的JavaScript库,可以方便地操作HTML文档,动态地向table添加行也是jQuery的强项之一。 动态table添加行通常分为两个步骤:首先是创建一行添加table中,然后是设置这行中单元格的内容。 首先,我们可以使用jQuery的append()方法,将一个新的行添加table中。具体步骤如下: 1. 选择table标签的jQuery对象。 例如,如果我们的表格id为“myTable”,可以使用如下代码选择它: var table = $('#myTable'); 2. 创建一个新的行元素。 我们可以使用jQuery的.createElement()方法来创建一个新的tr元素: var row = $('<tr>'); 3. 将该行元素添加table中。 可以使用jQuery的.append()方法,将这个新行添加到表格中: table.append(row); 这样就完成了添加新行的第一步,接下来我们需要向表格中的新行添加单元格。 1. 创建一个新的单元格元素。 可以使用jQuery的.createElement()方法来创建一个新的td元素: var cell1 = $('<td>'); var cell2 = $('<td>'); 2. 设置单元格内的内容。 使用jQuery的.text()方法设置单元格内的文本,例如: cell1.text('This is cell 1'); cell2.text('This is cell 2'); 3. 将单元格元素添加到行元素中。 可以使用jQuery的.append()方法将单元格元素添加到行元素中: row.append(cell1); row.append(cell2); 现在,我们已经完成了动态table添加行的全部步骤。完整的代码如下所示: var table = $('#myTable'); var row = $('<tr>'); var cell1 = $('<td>'); var cell2 = $('<td>'); cell1.text('This is cell 1'); cell2.text('This is cell 2'); row.append(cell1); row.append(cell2); table.append(row); 通过这些简单的操作,我们可以轻松地向table添加任意数量的行和单元格。当然,我们也可以在代码中使用循环来动态地生成多个行,从而更灵活地应对不同的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值