优书网 &=& 知轩藏书 - 源码深入解析IE11中被废止的JS方法_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
深入解析IE11中被废止的JS方法
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩6页未读，
定制HR最喜欢的简历
你可能喜欢该购物单包含：商品表格，若干物品，每件物品的名称、单价、金额以及取消订单，最后计算总价
主要功能实现：
　　每一种商品都可以对购买数量进行+1和-1操作，可以取消订单
　　主要方法实现：
　　数量的加一事件，减一事件，取消订单事件，添加商品方法，计算总价方法
　　添加商品
function add(){
var name=document.getElementById("name");
var price=document.getElementById("price");
var table=document.getElementById("tb1");
var tr=table.insertRow(table.rows.length-1);
var n=name.
if(n==""){
alert("商品名为空");
var p=parseFloat(price.value);
if(isNaN(p)){
alert("价格不为数字");
tr.innerHTML="&td&"+n+"&/td&"+"&td&"+p.toFixed(2)+"&/td&"+
"&td&&input type='button' value='-' onclick='change(this,-1);'&"+
" &span&1&/span& "+
"&input type='button' value='+' onclick='change(this,+1);'&"+
"&td&"+(p*1)+"&/td&"+
"&td&&input type='button' value='x' onclick='del(this);'&/td&";
total();//重新计算总金额
　　购买数量加一或者减一事件
function change(btn,n){//n为1或-1
//获取span节点
var td=btn.parentN
var tr=td.parentN
var table=tr.
var span=td.getElementsByTagName("span")[0];
//获取商品的数量
var num=parseInt(span.innerHTML);
//将数量加n
if(num&=0){
//将数量写到span节点
span.innerHTML=
//获取单价
var price=parseFloat(tr.cells[1].innerHTML);
//获取金额节点
var allprice=tr.cells[3];
//单价*数量
var allpricevalue=num*
//写到金额
allprice.innerHTML=
　　取消订单事件
function del(btn){
var td=btn.parentN
var tr=td.parentN
//获取商品名称
var name=tr.cells[0].innerHTML;
//获取tr的父节点table
var table =tr.parentN
if(confirm("确定要删除"+name+"吗?")){
table.deleteRow(tr.rowIndex);
　　计算总金额方法
function total(){
//获取table
var table=document.getElementById("tb1");
//获取总价节点
var sumNode=table.rows[table.rows.length-1].cells[1];
//获取每一行,获取每一行的价格相加
var sum=0.00;
for(;i&=table.rows.length-2;i++){
var tr=table.rows[i];
sum+=parseFloat(tr.cells[3].innerHTML);
//值放回总价节点
sumNode.innerHTML=
　　本案例全部代码
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&购物车&/title&
&script type="text/javascript"&
function add(){
var name=document.getElementById("name");
var price=document.getElementById("price");
var table=document.getElementById("tb1");
var tr=table.insertRow(table.rows.length-1);
var n=name.
if(n==""){
alert("商品名为空");
var p=parseFloat(price.value);
if(isNaN(p)){
alert("价格不为数字");
tr.innerHTML="&td&"+n+"&/td&"+"&td&"+p.toFixed(2)+"&/td&"+
"&td&&input type='button' value='-' onclick='change(this,-1);'&"+
" &span&1&/span& "+
"&input type='button' value='+' onclick='change(this,+1);'&"+
"&td&"+(p*1)+"&/td&"+
"&td&&input type='button' value='x' onclick='del(this);'&/td&";
total();//重新计算总金额
function change(btn,n){//n为1或-1
//获取span节点
var td=btn.parentN
var tr=td.parentN
var table=tr.
var span=td.getElementsByTagName("span")[0];
//获取商品的数量
var num=parseInt(span.innerHTML);
//将数量加n
if(num&=0){
//将数量写到span节点
span.innerHTML=
//获取单价
var price=parseFloat(tr.cells[1].innerHTML);
//获取金额节点
var allprice=tr.cells[3];
//单价*数量
var allpricevalue=num*
//写到金额
allprice.innerHTML=
function del(btn){
var td=btn.parentN
var tr=td.parentN
//获取商品名称
var name=tr.cells[0].innerHTML;
//获取tr的父节点table
var table =tr.parentN
if(confirm("确定要删除"+name+"吗?")){
table.deleteRow(tr.rowIndex);
function total(){
//获取table
var table=document.getElementById("tb1");
//获取总价节点
var sumNode=table.rows[table.rows.length-1].cells[1];
//获取每一行,获取每一行的价格相加
var sum=0.00;
for(;i&=table.rows.length-2;i++){
var tr=table.rows[i];
sum+=parseFloat(tr.cells[3].innerHTML);
//值放回总价节点
sumNode.innerHTML=
&style type="text/css"&
border: 1px solid #ccc;
border-radius:10px;
width: 400px;
border-collapse:collapse;
margin: 0 auto;
padding: 20px;
background-color: #fff;
padding: 30px;
background-color: #fff681;
text-align: center;
padding: 10px;
margin: 0 auto;
width: 520px;
&div id="cardid"&
&fieldset&
&legend&购物表&/legend&
&table id="tb1"&
&th&商品名称&/th&
&th&单价&/th&
&th&数量&/th&
&th&金额&/th&
&th&操作&/th&
&td colspan="3"&总计&/td&
&td&0.00&/td&
&/fieldset&
&fieldset&
&legend&添加模块&/legend&
&label&商品&/label&
&input type="text" id="name" name="name"&
&label&单价&/label&
&input type="text" id="price"&
&input type="button" value="添加" onclick="add();"&
&/fieldset&
阅读(...) 评论()
(C)2014 todom操作表格示例(dom创建表格)
& 发布时间： 16:22:13 & 作者：佚名 &
这篇文章主要介绍了dom操作表格示例(dom创建表格),需要的朋友可以参考下
一、使用HTML标签创建表格：
代码如下:&tableborder="1"width="300"&&caption&人员表&/caption&&thead&&tr&&th&姓名&/th&&th&性别&/th&&th&年龄&/th&&/tr&&/thead&&tbody&&tr&&td&张三&/td&&td&男&/td&&td&20&/td&&/tr&&tr&&td&李四&/td&&td&女&/td&&td&22&/td&&/tr&&/tbody&&tfoot&&tr&&tdcolspan="3"&合计：N&/td&&/tr&&/tfoot&&/table&thead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个
二、使用DOM创建表格
&table&标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTMLDOM来操作它。(HTMLDOM提供了更加方便快捷的方式来操作HTML)
代码如下:&script&window.onload=function(){vartable=document.createElement("table");//给表格添加属性table.width=300;//还可以使用这种方法：table.setAttribute('width',300)table.border=1;&/p&
&p&//创建表格的标题varcaption=document.createElement("caption");table.appendChild(caption);&/p&
&p&//给表格的标题添加内容//caption.innerHTML="人员表";//非W3c标准的方法varcaptionText=document.createTextNode("人员表");caption.appendChild(captionText);&/p&
&p&//创建表格的第一行，是个标题行varthead=document.createElement("thead");table.appendChild(thead);&/p&
&p&vartr=document.createElement("tr");thead.appendChild(tr);&/p&
&p&//列varth1=document.createElement("th");tr.appendChild(th1);th1.innerHTML="数据";varth2=document.createElement("th");tr.appendChild(th2);th2.innerHTML="数据";&/p&
&p&document.body.appendChild(table);};&/script&
三、使用DOM获取表格数据（使用DOM操作表格会很烦）代码如下:window.onload=function(){vartable=document.getElementsByTagName("table")[0];alert(table.children[0].innerHTML);};
四、使用HTMLDOM来获取表格数据（方便，简单，清晰）。
因为表格较为繁杂，层次也多，在使用之前所学习的DOM只是来获取某个元素会非常难受，所以使用HTMLDOM会清晰很多。
代码如下:window.onload=function(){//使用HTMLDOM来获取表格元素vartable=document.getElementsByTagName('table')[0];//获取table引用//按HTMLDOM来获取表格的&caption&alert(table.caption.innerHTML);//获取caption的内容//table.caption.innerHTML="学生表";//还可以设置值};代码如下:window.onload=function(){//使用HTMLDOM来获取表格元素vartable=document.getElementsByTagName('table')[0];//获取table引用//按HTMLDOM来获取表头表尾&thead&、&tfoot&alert(table.tHead);//获取表头alert(table.tFoot);//获取表尾&/p&
&p&//按HTMLDOM来获取表体&tbody&alert(table.tBodies);//获取表体的集合};
在一个表格中&thead&和&tfoot&是唯一的，只能有一个。而&tbody&不是唯一的可以有多个，这样导致最后返回的&thead&和&tfoot&是元素引用，而&tbody&返回的是元素集合。
代码如下:window.onload=function(){//使用HTMLDOM来获取表格元素vartable=document.getElementsByTagName('table')[0];//获取table引用//按HTMLDOM来获取表格的行数alert(table.rows.length);//获取行数的集合，数量&/p&
&p&//按HTMLDOM来获取表格主体里的行数alert(table.tBodies[0].rows.length);//获取主体的行数的集合，数量};代码如下:window.onload=function(){//使用HTMLDOM来获取表格元素vartable=document.getElementsByTagName('table')[0];//获取table引用&/p&
&p&//按HTMLDOM来获取表格主体内第一行的单元格数量(tr)alert(table.tBodies[0].rows[0].cells.length);//获取第一行单元格的数量};代码如下:window.onload=function(){//使用HTMLDOM来获取表格元素vartable=document.getElementsByTagName('table')[0];//获取table引用&/p&
&p&//按HTMLDOM来获取表格主体内第一行第一个单元格的内容(td)alert(table.tBodies[0].rows[0].cells[0].innerHTML);//获取第一行第一个单元格的内容};代码如下:&script&window.onload=function(){//使用HTMLDOM来获取表格元素vartable=document.getElementsByTagName('table')[0];//获取table引用&/p&
&p&//按HTMLDOM来删除标题、表头、表尾、行、单元格//table.deleteCaption();//删除标题//table.deleteTHead();//删除&thead&//table.tBodies[0].deleteRow(0);//删除&tr&一行//table.tBodies[0].rows[0].deleteCell(0);//删除&td&一个单元格//table.tBodies[0].rows[0].deleteCell(1);//删除一个单元格中的内容，相当于删除掉一个单元格，后面的但愿会补进};&/script&
五、HTMLDOM创建表格
代码如下:window.onload=function(){//按HTMLDOM创建一个表格vartable=document.createElement('table');table.border=1;table.width=300;&/p&
&p&table.createCaption().innerHTML='人员表';&/p&
&p&//table.createTHead();//table.tHead.insertRow(0);varthead=table.createTHead();//该方法返回一个引用vartr=thead.insertRow(0);//该方法返回一个引用&/p&
&p&vartd=tr.insertCell(0);//td.appendChild(document.createTextNode('数据'));//添加数据的一种方式，还可以使用下面种方式td.innerHTML="数据";vartd2=tr.insertCell(1);//td2.appendChild(document.createTextNode('数据2'));td2.innerHTML="数据2";&/p&
&p&document.body.appendChild(table);};在创建表格的时候&table&、&tbody&、&th&没有特定的方法，需要使用document来创建。也可以模拟已有的方法编写特定的函数即可，例如：insertTH()之类的。
大家感兴趣的内容
12345678910
最近更新的内容JQuery 和js 遍历td
JS的trim函数：function trim(str){ var reg=/^\s*|\s*$/g; str=str.replace(reg,""); }JQuery实现对表格的搜索function searchByname(){ var searchContent=$("#searchContent").val(); if(trim(searchContent)==""|trim(searchContent)==null){
alert("请输入查询药品名称");
$("#searchContent").val(trim(searchContent))
} $('#mainBody tr').each(function(i){
// 遍历 tr
var searchTarget= $(this).children("td").eq(0).text();
if(searchTarget.search(searchContent)!=-1){
$(this).css({
"background-color":"red"
$(this).css({
"background-color":"white"
} }); }JQuery遍历表格： $('#tab tr').each(function(i){
// 遍历 tr
$(this).children('td').each(function(j){
// 遍历 tr 的各个 td
alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
});JS遍历表格：var tb = document.getElementById('tab');
// table 的 id
var rows = tb.
// 获取表格所有行
for(var i = 0; i&rows. i++ ){
for(var j = 0; j&rows[i].cells. j++ ){
// 遍历该行的 td
alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+rows[i].cells[j].innerHTML+"。");
// 输出每个td的内容
没有更多推荐了，