HTML TABLE批量添加行与删除行

最新推荐文章于 2021-07-03 19:44:00 发布

最新推荐文章于 2021-07-03 19:44:00 发布 · 144 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个用于安排会议议程的HTML表格设计及其JavaScript操作方法，包括添加和删除行的功能实现。此外，还提供了如何使用jQuery选择器来简化这些操作的示例。

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

表格格式如下:

	<table class="page_datalist" id="batch_add_table">
	    	<thead>
				<tr>
					<th  width="3%">日期</th>
					<th scope="col" width="2%">开始时间</th>
					<th scope="col" width="2%">结束时间</th>
					<th scope="col" width="10%">议题</th>
					<th scope="col" width="8%">地点</th>
					<th scope="col" width="20%">内容</th>
					<th scope="col" width="8%">操作</th>
				</tr>	    	
	        </thead>
	        
	        <tbody>
	         <tr>
	         
	          <!-- 日期 -->
              <td align="left">
				 <input id="date" type="text"
									name="date" class="Wdate"
									onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
									value=""
									readonly="readonly" />
	         </td>
	            	
	         <!-- 开始时间 -->	
	          <td align="left">
	            			<input id="startTime"
							type="text" name="startTime" class="Wdate"
							value=""
							onfocus="WdatePicker({dateFmt:'HH:mm'})"
							readonly="readonly" />
	            		</td>
	            		
	         <!-- 结束时间 -->	 		
	         <td align="left">
	            				<input id="endTime" type="text"
							name="endTime" class="Wdate"
							value=""
							onfocus="WdatePicker({isShowClear:false,dateFmt:'HH:mm',minDate:'#F{$dp.$D(\'startTime\')||\'2020-10-01\'}'})"
							readonly="readonly" />
	        </td>
	          
	          <!-- 议题 --> 
	       <td align="left">  	
				    <input id="topic" type="text"
							value="" maxlength="128" />
         	</td>	
         
          <!-- 地点 -->
		  <td align="left">
		  <input id="location" type="text" 
							value=""  maxlength="128" />
		  </td>
			
		<!-- 内容 -->
		<td align="left">
		<textarea  id="description" rows="1000" cols="40"
								name="description" style="height:80px;"></textarea>	
		</td>
				     
		 <td align="center">
				    <a href="javascript:void(0);" onClick="insertRow(this);">添加</a>
				    <a href="javascript:void(0);" onClick="delCurrentRow(this);">删除</a>
		 </td>
		 
        </tr>
        
	  </tbody>
	    </table>

对应的JS函数:

/**
	*删除当前行
	*/
	function delCurrentRow(obj){
		if(confirm("确定删除当前议程?")){
			 if(document.all.batch_add_table.rows.length>2){
				 var clickedRow=obj;
				 while(clickedRow.tagName!="TR"){
					 clickedRow=clickedRow.parentNode;
				 }
				 clickedRow.parentNode.removeChild(clickedRow);
			 }else{
				 alert("此行不能进行删除！");
				 return;
			 }
		}
	}
	
	/**
	*复制当前行并插入到表格中去
	*/
	function insertRow(obj){
		//获取当前表格batch_add_table的行总数
		var rowNum=document.all.batch_add_table.rows.length;
		//获取当前表格的行并克隆
		var newrow = document.all.batch_add_table.rows[rowNum-1].cloneNode(true); 
		//新行的列数
		var colNum=newrow.cells.length;
		//获取当前行并进行递归循环操作找到当前行的节点
		var oldTr=obj;
		while(oldTr.tagName!="TR"){
			oldTr=oldTr.parentNode;
		}
		//var oldTr = $("tr:last", $("#batch_add_table"));
		//var oldTr = $("tr:last", $("#batch_add_table"));
		//通过JQUERY选择器来获取对应的控件的值
		var date= $("#date", oldTr).val();
		var startTime= $("#startTime", oldTr).val();
		var endTime = $("#endTime", oldTr).val();
		
		if(date==''){
			alert('请选择议程日期！');
			return ;
		}
		if(startTime==''){
			alert('请选择议程开始时间！');
			return ;
		}
		if(endTime==''){
			alert('请选择议程结束时间！');
			return ;
		}
		
		$("#startTime", newrow).val(endTime);
		//复制当前行到表格
		document.all("batch_add_table").appendChild(newrow); 
	}

彰显JQUERY选择器的优势的几句:

	//var oldTr = $("tr:last", $("#batch_add_table"));
	//var oldTr = $("tr:last", $("#batch_add_table"));
	//通过JQUERY选择器来获取对应的控件的值
	var date= $("#date", oldTr).val();
	var startTime= $("#startTime", oldTr).val();
	var endTime = $("#endTime", oldTr).val();