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

作者:拾光时间:2026-10-29 18:29:22浏览:559

本文介绍了使用JavaScript原生方法和jQuery库遍历HTML表格所有单元格内容的具体实现。通过原生JS的DOM操作获取表格ID并逐行逐列提取innerText,以及利用jQuery选择器获取td文本或遍历子元素,展示了两种常见且实用的表格数据读取方案,供JavaScript程序设计参考。

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

本文通过实例详解了利用JavaScript和jQuery遍历HTML表格中所有单元格数据的具体实现方式,旨在为相关开发者提供实用的参考代码。

若需使用原生JavaScript遍历表格内所有单元格的内容,可参考以下代码实现:


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;
}

该函数接收表格的唯一标识ID作为参数,并通过document对象获取对应的表格元素。

若使用jQuery库来遍历表格中tr标签下的td内容,可采用以下两种常见方式:

第一种方式是使用$("#trID td").text(),该方法会返回指定trID下所有td元素的文本拼接成的一个字符串。

第二种方式是先通过$("#trID").children获取该tr下的所有td元素集合,随后遍历该集合,利用.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程序设计的介绍能对大家有所帮助。

作者最新文章