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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 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/03/05 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python add_argument()用法解析
2020/01/29 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
电影雷锋观后感
2015/06/10 职场文书
大学班长竞选稿
2015/11/20 职场文书
小学英语课教学反思
2016/02/15 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python