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 相关文章推荐
jQuery总体架构的理解分析
Mar 07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
node网页分段渲染详解
Sep 05 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
vue-cli3全面配置详解
2018/11/14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
班组长安全生产职责
2013/12/16 职场文书
机关搬迁方案
2014/05/18 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
利用python做表格数据处理
2021/04/13 Python
晶体管单管来复再生式收音机
2021/04/22 无线电
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
SQL注入详解及防范方法
2021/12/06 MySQL