快捷導(dǎo)航

JS與jQuery遍歷Table所有單元格內(nèi)容的方法

更新時(shí)間：2015年12月07日 12:37:20 作者：summer0311

這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實(shí)例形式分別描述了JavaScript與jQuery實(shí)現(xiàn)遍歷table單元格的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS與jQuery遍歷Table所有單元格內(nèi)容的方法。分享給大家供大家參考，具體如下：

用JS去遍歷Table的所有單元格中的內(nèi)容，可以用如下JS代碼實(shí)現(xiàn)：

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中單元格的內(nèi)容
   tableInfo += " ";
  }
  tableInfo += "\n";
 }
 return tableInfo;
}

這個(gè)方法的參數(shù)是唯一標(biāo)識(shí)Table的id，用document對(duì)象的獲取

jQuery 遍歷Table中tr中的td中的內(nèi)容：

1、$("#trID td").text()得到的是一個(gè)所以trID之中td的值返回一個(gè)字符串。

2、$("#trID").children 得到一個(gè)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>無標(biāo)題文檔</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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: