如何获取table表格中的数据

最新推荐文章于 2024-07-30 10:02:32 发布

前方太黑暗

最新推荐文章于 2024-07-30 10:02:32 发布

阅读量9k

点赞数 4

分类专栏： jquery 文章标签：获取table表格数据

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/82589601

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

如图：想要将表中的数据拿出来

html代码

<div class="saveTable">
					         <table class="table table-dashed-line">
					              <thead>
					                <tr>
					                	<th style="display:none">id</th>
					                	<th>日限额（元）</th>
					                	<th>星期</th>
					                	<th>时间</th>
					                	<th>终止时间</th>
					                	<th>启动状态</th>
					                	<th>操作</th>
					                </tr>
					              </thead>
								  <tbody id="day">
								    <tr>
								        <td align="center" style="display:none"><input id="id0" name="id0" style="width:70px"></td>
								    	<td align="center" style="width:97px"><input id="dayValue0" name="dayValue0" style="width:70px"></td>
								    	<td align="left" style="width:349px">
								    		<div class="input-checkbox" style="width:80px">
									      		<input type="checkbox" name="dayWeek0" value="1">
									      		<span>星期一</span>
									      	 </div>
									      	 <div class="input-checkbox" style="width:80px">
												<input type="checkbox" name="dayWeek0" value="2">
												<span>星期二</span>
											 </div>
											  <div class="input-checkbox" style="width:80px">
											     <input type="checkbox" name="dayWeek0" value="3">
												 <span>星期三</span>
											  </div>
											   <div class="input-checkbox" style="width:80px">
											     <input type="checkbox" name="dayWeek0" value="4">
												 <span>星期四</span>
											  </div>
											  <br/>
											  <div class="input-checkbox" style="width:80px">
											     <input type="checkbox" name="dayWeek0" value="5">
												 <span>星期五</span>
											  </div>
											  <div class="input-checkbox" style="width:80px">
											     <input type="checkbox" name="dayWeek0" value="6">
												 <span>星期六</span>
											  </div>
											  <div class="input-checkbox" style="width:80px">
											     <input type="checkbox" name="dayWeek0" value="7">
												 <span>星期日</span>
											  </div>
								    	</td>
								    	<td align="center" style="width:140px">
								    		<select style="width:100px;" id="time0" name="time0">
								    			<option value='' >选择时间</option>
									    	</select>
								    	</td>
								    	<td align="center" style="width:140px">
								    		<input id="endTime0" name="endTime0" onFocus="ws.tools.date({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
								    	</td>
								    	<td align="center" style="width:180px">
								    		<div class="input-radio" style="width:60px">
									      		<input type="radio" name="switch0" value="1" checked>
									      		<span>开启</span>
									      	</div>
									      	
									      	<div class="input-radio" style="width:60px">
												<input type="radio" name="switch0" value="2">
												<span>暂停</span>
											</div>
								    	</td>
								    	<td align="center">
								    		<a onclick="addDay()" style="cursor:pointer"><i class="glyphicon glyphicon-plus ico-main" aria-hidden="true" style="right: 20px;"></i></a>
								    		<a onclick="removeDay(this)" style="cursor:pointer"><i class="glyphicon glyphicon-trash ico-danger" aria-hidden="true"></i></a>
								    	</td>
								    </tr>
								  </tbody>
						     </table>
					    </div>

js代码

getDayValues : function(){
			var tableValues = [];
			var table=document.getElementById("day"); 
		    var rows=table.rows;
			for(var i=0;i<rows.length;i++) { 
				var rowobj = {};
		        for(var j=0;j<rows[i].cells.length-1;j++) { 
		        	if($(rows[0].cells[j]).find('input').attr('name')){
		        		if($(rows[0].cells[j]).find('input').attr('name').indexOf('dayWeek')!=-1){
			        		var id_array=new Array();
			        		$('input[name="dayWeek'+i+'"]:checked').each(function(){
			        			id_array.push($(this).val());
			        		});
			        		var idstr=id_array.join(',');
			        		rowobj['dayWeek'] = idstr;
			        	}else if($(rows[0].cells[j]).find('input').attr('name').indexOf('switch')!=-1){
			        		var val = $('input[name="switch'+i+'"]:checked').val();
			        		rowobj['switch'] = val;
			        	}else if($(rows[0].cells[j]).find('input').attr('name').indexOf('dayValue')!=-1){
			        		rowobj['dayValue'] = $(rows[i].cells[j]).find('input').val();
			        	}else if($(rows[0].cells[j]).find('input').attr('name').indexOf('id')!=-1){
			        		rowobj['id'] = $(rows[i].cells[j]).find('input').val();
			        	}else{
			        		rowobj['endTime'] = $(rows[i].cells[j]).find('input').val();
			        	}
		        	}else{
		        		var val = $("#time"+i).find("option:checked").text();
		        		rowobj['time'] = val;
		        	}
		        } 
		        rowobj['name'] = $('#id').val();
		        tableValues.push(rowobj);
			} 
			return tableValues;
		},

主要是通过rows 和 cells 实现