JS與jQuery遍歷Table所有單元格內容的方法_javascript技巧-js教程-PHP中文網

JS與jQuery遍歷Table所有單元格內容的方法_javascript技巧

WBOY

發布： 2016-05-16 15:27:29

原創

998 人瀏覽過

本文實例講述了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程式設計有所幫助。