jQuery获取表格行数及单元格内容的实现代码

作者:工具松鼠时间:2026-10-30 09:55:31浏览:233

本文介绍了使用jQuery获取HTML表格行数并输出单元格内容的方法。通过$("#tableId tr").length获取总行数,利用.find("td").each()遍历所有单元格并提取文本。代码示例展示了完整的JS逻辑与HTML结构,适用于需要动态处理表格数据的场景。

jQuery获取表格行数及单元格内容实现

本文介绍了一种使用jQuery获取HTML表格行数并提取单元格内容的方法,供读者参考。

JavaScript代码实现如下:


<script language="javascript" type="text/javascript">
$(function() {
  $("#txtInput").attr("value", "90");
  var v_temp = $("#lblMessage").text();
  //alert(v_temp);
  $("#txtInput01").attr("value", v_temp);
  $("#div1").removeClass("div1");
  $("#div1").addClass("divtest");
  var flog = $("#div1").hasClass("divtest");
  $("#div1").html("<input type='button' id='id123' style='width:100px; height:150px'>");
  var t01 = $("#table01 tr").length;
  alert(t01);
  $("#table01").find("td").each(function(i) {
    var t = $(this).text();
    alert(t);
  })
});
</script>

对应的HTML结构部分如下:


<form id="form1" runat="server">
  <div>
  <input type="text" id="txtInput" runat="server" style=" font:" />
  <br/>
  <asp:Label ID="lblMessage" Text="我在测试" runat="server"></asp:Label>
  <br/>
  <input type="text" id="txtInput01" runat="server" />
    <br />
    <asp:TextBox ID="TextBox1" runat="server" Width="156px"></asp:TextBox>
    <input type="button" onclick="createXMLHttpRequest()" />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
  </div>
   <table id="table01" border="1px"><tr>
  <td>11</td><td>11</td></tr>
  <tr><td>22</td><td>22</td></tr>
  <tr><td>33</td><td>33</td></tr>
  <tr><td>44</td><td>44</td></tr>
  <tr><td>55</td><td>55</td></tr></table>
  <div id="div1" class="div1">
  </div>
</form>

如需了解更多jQuery相关知识,可参考本站的《jQuery表格操作技巧汇总》、《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》等专题文章。

希望上述内容能对您的jQuery编程有所帮助。

作者最新文章