JavaScript遍历含Input的Table表格实例

作者:窗边听雨

时间:2026-10-29

浏览:552

本文介绍如何使用JavaScript遍历包含输入框的HTML表格。通过示例代码展示如何定位表格行与单元格,利用DOM方法获取指定位置的Input元素值,适用于后台动态生成表格的前端数据读取场景。

文章目录

JavaScript遍历含Input的Table表格实例

本文通过具体实例,讲解如何使用JavaScript遍历包含输入框(Input)的表格(Table),供读者参考学习。

首先定义如下HTML表格结构:


<table id="groupTable" class="tblist_black">
<%
 DataTable firstGroupTable = ViewState["firstGroupTable"] as DataTable;
 if (firstGroupTable != null)
 {
 for (int i = 0; i < firstGroupTable.Rows.Count; i )
 {
 %>
  <tr>
  <td><div style="width:40px;"><span>一级</span></div></td>
  <td><div style="width:40px;"><span>&nbsp;</span></div></td>
  <td><div style="width:180px;"><span><input type="text" value="<%=firstGroupTable.Rows[i]["GroupName"]%>" /></span></div></td>
  <td style="display:none"><div style="width:80px;"><span><%=firstGroupTable.Rows[i]["FirstNodeID"]%></span></div></td>
  <td style="display:none"><div style="width:80px;"><span>&nbsp;</span></div></td>
  <td><div style="width:60px;"><span><a href="#" onclick="editRow(<%=i%>)">[更新]</a></span></div></td>
  <td><div style="width:60px;"><span><a href="">[删除]</a></span></div></td>
  <td><div style="width:60px;"><span><a href="">[二级]</a></span></div></td>
  </tr>
<%
 }
 }
%>
</table>

接着使用JavaScript实现遍历逻辑:


function editRow(rowIndex) {
 alert(window.groupTable.rows.item(rowIndex).cells.item(2).getElementsByTagName_r('input')[0].value);
}

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章