Heim >Web-Frontend >js-Tutorial >So durchlaufen Sie den Inhalt aller Zellen in einer Tabelle mithilfe von JS- und jQuery_javascript-Kenntnissen
Das Beispiel in diesem Artikel beschreibt die Methode zum Durchlaufen des Inhalts aller Zellen in der Tabelle mithilfe von JS und jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Verwenden Sie JS, um den Inhalt aller Zellen in der Tabelle zu durchlaufen . Sie können den folgenden JS-Code verwenden, um dies zu erreichen:
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; }
Der Parameter dieser Methode ist die ID, die die Tabelle eindeutig identifiziert und mithilfe des Dokumentobjekts abgerufen werden kann
jQuery durchläuft den Inhalt von td in tr in Tabelle:
1. $("#trID td").text() ruft den Wert von td in trID ab und gibt einen String zurück.
2. $("#trID").children ruft alle tds unter einer trID ab, durchläuft dann $("#trID").children und verwendet .eq(index).text(), um den Wert in td zu erhalten ;
<!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>
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.