html 请求数据与表格动态添加数据

在html页面向后端请求数据，使用的是jQuery ajax() 方法，详细的介绍请看：https://www.runoob.com/jquery/ajax-ajax.html
数据请求成功后动态的添加进表格显示出来，有原生方法和jQuery方法。

html

<!-- bootstrap响应式表格 -->
<div class="table-responsive-sm">
	<table class="table table-striped table-bordered my-4">
		<thead class="table-dark">
			<tr>
				<th>序号</th>
				<th>区域</th>
				<th>店铺</th>
				<th>营业额</th>
				<th>数量</th>
			</tr>
		</thead>
		<!-- 表格数据从后端返回，动态添加进表格 -->
		<tbody> </tbody>
	</table>
</div>

js

function getList() {	
	//请求接口
	$.ajax({
		type: 'GET',
		dataType: 'json', //设置返回数据的格式
		url: 'http://xxxxxxxxxxxxx/sale',
		data: {  //提交给后端的数据
			dd: '0', 
			userid: '01O',
			order: "mn desc", //按金额降序
		},
		success(res) {
			let oldArr = res
			let newArr = oldArr.map((item, index) => { //提取部分属性组合成新的对象
				return Object.assign({}, {
					'or': index + 1,
					'qy': item.qy,
					'name': item.name,
					'mn': item.mn,
					'nu': item.nu
				})
			})
		
			// 使用html原生方法动态添加数据进入表格
			/* var tbody = document.querySelector('tbody'); //找到tbody标签
			for(var i = 0; i < newArr.length; i++) { //对数组进行循环
				var tr = document.createElement('tr');
				tbody.appendChild(tr); //建立tr标签
				
				for (var k in newArr[i]) { //对数组的每一个元素进行遍历
					var td = document.createElement('td'); //新建td
					td.innerHTML = newArr[i][k]; //将数据写进td中
					tr.appendChild(td); //建立td标签
				}
			} */
			
			// 使用jquery方法动态添加数据进入表格
			for(var i = 0; i < newArr.length; i++) { //对数组进行循环
				var tr = $('<tr></tr>'); //创建tr标签
				tr.appendTo('tbody'); //把tr标签插入tbody标签中
				
				for (var k in newArr[i]) { //对数组的每一个元素进行遍历
					var td = $('<td>'+ newArr[i][k] +'</td>'); //创建td标签并且赋值
					td.appendTo(tr) //把td插入tr
				}
			}	
		},
		
		error(err) {
			console.log('请求失败')
		}
		
	})
}