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 读后台cookie代码
Sep 15 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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初学者头疼问题总结
2006/10/09 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python读取中文txt文本的方法
2018/04/12 Python
python简单操作excle的方法
2018/09/12 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
贷款工资证明范本
2015/06/12 职场文书
贷款收入证明格式
2015/06/24 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书