Rumah > Soal Jawab > teks badan
a页面的一段代码
<li id="template">
<a href="course/course_detail.html" data-ajax='false'>
<img src="images/01.png" id="_img"/>
<h3 id="Course_Name"></h3>
<p>
讲师:<span id="Teachername"></span>
时长<span id="Credit_hour"></span>分钟
时间:<span id="Course_CreateDate"></span>
</p>
</a>
</li>
b页面的一段代码
<tr>
<td class="table_1">课程名称:</td>
<td colspan="3" class="table_2">心情美好</td>
</tr>
<tr>
<td class="table_1">时长:</td>
<td class="table_1">2</td>
<td class="table_1">讲师:</td>
<td class="table_2">专家团</td>
</tr>
我想把a页面 li
里面每个 span
标签 id
获取到的值,传到b页面对应的 td
里,求指导。
ringa_lee2017-04-10 12:49:43
来自 iteye 的文章:HTML5本地存储不完全指南
如果你的程序需要在不同页面访问同一个值,你可能需要了解这个值是否已经被其他页面改变了,这可以通过向浏览器注册storage事件来实现:
window.addEventListener('storage', function(e) {
console.log(e.key + "'s value is changed from '" +
e.oldValue + "' to '" + e.newValue + "' by " + e.url);
}, false);
//A页面
localStorage['foo'] = 'bar';
//B页面
localStorage['foo'] = 'newBar';
这时你应该会在 A 页面的 Console 中看到:
foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html
ringa_lee2017-04-10 12:49:43
一句话概括,纯html页面之间的传值可以通过url后面的参数进行比如:
b.html?teacher=xx&time=xxx
回到问题中,首先从a.html到b.html需要一个跳转方式,比方说在a.html页面里面你有一个链接:
<a href="b.html" id="toPageB">跳转到b页面</a>
剩下的就好办了,依次取得你需要的参数,然后修改页面url:
var dataFromLi=[$("#Teachername").text(),$("#Credit_hour").text()];
$("#toPageB").attr("href","b.html?data="+dataFromLi);
然后在b.html页面解析url,获取参数。
更新,如何根据url获取参数:
window.location.search 会返回所有地址栏从“?”开始的字符串。获取某个参数值可以通过正则,下面是一个简单的获取参数的函数:
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
如果你采用jQuery,你可以用更简单的办法:
$.url().param('data');
PHPz2017-04-10 12:49:43
总结一下:
方法有 2 种:
第一种方法:http://segmentfault.com/q/1010000000308712#a-1020000000308821
第二种方法:http://segmentfault.com/q/1010000000308712#a-1020000000308852
怪我咯2017-04-10 12:49:43
a,b页面同用一个js文件,然后将a页面li里面每个span 标签id获取到的值,保存到一个js的全局变量中,在加载b页面通过js创建table,
天蓬老师2017-04-10 12:49:43
html5的话可以用 sessionStorage 或 localStorage
很容易的
sessionStorage 是会话存储,关闭浏览器就没了
localStorage 是持久化存储,完全可以替代cookie 存储空间更大。
实现方法
存:sessionStorage["par1"]="123";
取:sessionStorage["par1"]
localStorage实现方法和sessionStorage一样