JS与jQuery遍历Table所有单元格内容的方法


Posted in Javascript onDecember 07, 2015

本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法。分享给大家供大家参考,具体如下:

JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现:

function GetInfoFromTable(tableid) {
 var tableInfo = "";
 var tableObj = document.getElementById(tableid);
 for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row
  for (var j = 0; j < tableObj.rows[i].cells.length; j++) { //遍历Row中的每一列
   tableInfo += tableObj.rows[i].cells[j].innerText; //获取Table中单元格的内容
   tableInfo += " ";
  }
  tableInfo += "\n";
 }
 return tableInfo;
}

这个方法的参数是唯一标识Table的id,用document对象的获取

jQuery 遍历Table中tr中的td中的内容:

1、$("#trID td").text()得到的是一个所以trID之中td的值 返回一个字符串。

2、$("#trID").children 得到一个trID下的所有td,然后遍历$("#trID").children使用.eq(index).text()得到td中的值;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/> 
<title>无标题文档</title> 
<scriptlanguage="javascript"src="jquery-1.6.2.min.js"type="text/javascript"></script> 
<scriptlanguage="javascript"> 
$(document).ready(function() { 
  $("#table a").each(function (){ 
  this.onclick = function(){ 
   var thisObj = this.parentNode.parentNode; 
   var a = $(thisObj).children(); 
   var arr = new Array(); 
   var laber = $("#xiugai label"); 
   for(var i=0;i<a.length;i++){ 
    arr[arr.length] = a.eq(i).text(); 
   } 
   for(var i=0;i<laber.length;i++){ 
    laber.eq(i).text(arr[i]); 
   } 
   $("#table").hide(); 
   $("#xiugai").show(2000) 
  } 
 }); 
}); 
function fanhui(){ 
 $("#table").show(2000); 
 $("#xiugai").hide(2000);  
} 
</script> 
</head> 
<body> 
<divid ="table"> 
<tablewidth="470"border="0"cellspacing="0"cellpadding="0"> 
 <trid="tr1"> 
 <td>id</td> 
 <td>名字</td> 
 <td>密码</td> 
 <td>操作</td> 
 </tr> 
 <trid="tr2"> 
 <td>1</td> 
 <td>张三</td> 
 <td>12</td> 
 <td><ahref="#">删除</a></td> 
 </tr> 
 <trid="tr3"> 
 <td>2</td> 
 <td>李四</td> 
 <td>34</td> 
 <td><ahref="#">删除</a></td> 
 </tr> 
 <trid="tr4"> 
 <td>3</td> 
 <td>王五</td> 
 <td>56</td> 
 <td><ahref="#">删除</a></td> 
 </tr> 
 <trid="tr5"> 
 <td>4</td> 
 <td>六子</td> 
 <td>78</td> 
 <td><ahref="#">删除</a></td> 
 </tr> 
</table> 
</div> 
<divid ="xiugai"style="display:none; background-color:#FFC; height:360px; width:260px"> 
 ID:<label></label><br/> 
 姓名:<label></label><br/> 
 密码:<label></label><br/> 
 <buttononclick="fanhui()">返回</button> 
</div> 
</body> 
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js图片处理示例代码
May 12 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 #Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 #Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 #Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 #Javascript
javascript字符串函数汇总
Dec 06 #Javascript
win7下安装配置node.js+express开发环境
Dec 06 #Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 #Javascript
You might like
使用php显示搜索引擎来的关键词
2014/02/13 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python中几种导入模块的方式总结
2017/04/27 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
什么是反射
2012/03/17 面试题
幼儿园教师奖惩制度
2014/02/01 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
聚美优品广告词改编
2014/03/14 职场文书
党支部公开承诺书
2014/03/28 职场文书
医学专业大学生求职信
2014/07/12 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
廉政承诺书
2015/01/19 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python