jqeury 读取另一个文件

最新推荐文章于 2024-07-28 02:25:43 发布

原创最新推荐文章于 2024-07-28 02:25:43 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用jQuery的$.get函数从另一个HTML文件中加载表格数据，并通过控制台展示获取的内容及其特定元素。

1利用jqeury.get函数获取页面内容对象，新建test.html 文件代码如下：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/index00.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){   
	$.get('result.html').success(function(content){
		console.log(content)
		console.log($(content).find('tr'));
	});
});
</script>
</head>
<body>
	
</body>

新建 result.html 代码如下

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link href="http://192.168.0.101:8084/MB_HRB10/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://192.168.0.101:8084/MB_HRB10/js/jquery-1.11.1.min.js"></script>
<script src="http://192.168.0.101:8084/MB_HRB10/js/bootstrap.min.js"></script>
<style type="text/css">
.tx_cz{padding:0 15px;display:none; position:absolute; right:0; top:0;background:#f6f6f6;height:28px;line-height:28px}
.tx_cz >a{color:#eda135;font-size:12px !important;}
.tx_cz >a:hover{color:#fcaa41;}
</style>
</head>
<body>
	<table>
		<tr>
			<th>代码</th>
			<th>名称</th>
		</tr>
		<tr>
			<td>代码1</td>
			<td>名称1</td>
		</tr>
		<tr>
			<td>代码2</td>
			<td>名称2</td>
		</tr>
		<tr>
			<td>代码3</td>
			<td>名称3</td>
		</tr>		
	</table>
</body>