信鸽网

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

  作者：bea

本文实例讲述了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

本文实例讲述了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 += "
";

 }

 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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: