脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS与jQuery遍历Table所有单元格内容

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

 更新时间：2015年12月07日 12:37:20   作者：summer0311  
这篇文章主要介绍了JS与jQuery遍历Table所有单元格内容的方法,结合实例形式分别描述了JavaScript与jQuery实现遍历table单元格的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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高级程序设计》阅读笔记（二） ECMAScript中的原始类型

    《JavaScript高级程序设计》阅读笔记（二） ECMAScript中的原始类型

    ECMAScript有5种原始类型(primitive type)，即Undefined、Null、Boolean、Number和String。ECMAScript提供了typeof来判断值的类型
    2012-02-02
  • 如何安装控制器JavaScript生成插件详解

    如何安装控制器JavaScript生成插件详解

    这篇文章主要给大家介绍了关于如何安装控制器JavaScript生成插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-10-10
  • 详解JavaScript数据类型和判断方法

    详解JavaScript数据类型和判断方法

    这篇文章主要介绍了JavaScript数据类型和判断方法的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • 详解JavaScript的函数简介

    详解JavaScript的函数简介

    这篇文章主要为大家介绍了JavaScript的函数简介，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • 深入浅析JS是按值传递还是按引用传递(推荐)

    深入浅析JS是按值传递还是按引用传递(推荐)

    这篇文章主要介绍了JS是按值传递还是按引用传递(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • Dom元素变换效果（工具函数）

    Dom元素变换效果（工具函数）

    　做前端或者js程序员的同学应该都有感受，在日常工作中，用的最多的功能，一个是ajax与后台的数据接口，另一个就是对Dom元素的style控制，来达到不同的变换效果。
    2010-10-10
  • 一篇文章弄懂javascript内存泄漏

    一篇文章弄懂javascript内存泄漏

    js的垃圾回收机制就是为了防止内存泄漏的,这篇文章主要给大家介绍了如何通过一篇文章弄懂javascript内存泄漏的相关资料,需要的朋友可以参考下
    2021-05-05
  • JavaScript中的类型判断你真的了解了吗

    JavaScript中的类型判断你真的了解了吗

    这篇文章主要为大家详细介绍了JavaScript中类型判断的相关常见方法,文中的示例代码讲解详细,对我们深入学习JavaScript有一定帮助,需要的可以参考下
    2023-11-11
  • ES6入门教程之let和const命令详解

    ES6入门教程之let和const命令详解

    最近做项目的过程中，使用到了ES6，因为之前很少接触，所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令，所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料，需要的朋友可以参考下。
    2017-05-05
  • javascript和HTML5利用canvas构建猜牌游戏实现算法

    javascript和HTML5利用canvas构建猜牌游戏实现算法

    让我猜猜你心中的牌，先随机生成27张牌，不能重复列出三列牌，然后记住其中一张，然后点击牌所在的列，多次就可以猜出你想的牌，具体实现如下，感兴趣的朋友可以参考下哈
    2013-07-07

最新评论