在ASP.NET中表格的显式方法多种多样,有html标签<table></table>,有asp服务器控件GridView,还有Repeater控件等都可以帮我们在页面显式表格信息。GridView控件比较强大,它有自带的属性和方法可以用来对显式的表格数据进行各种操作。但是如果使用传统html标签<table></table>或者是Repeater控件来显式数据,又该如何取到选中行的数据呢。这里我们来介绍一下利用JS来取页面表格数据的方法。

  

  如图所示,我们需要对表格中的数据实现编辑,删除等操作。

  下面以Repeater控件为例:

  (1)页面表格:定义好表头,并设置好数据绑定(有些操作需要取到该条数据的主键,考虑到实际情况,我们应该将主键隐藏,对相应的列使用hidden属性即可)。在后台只需要将Repeater绑定到相应的数据源。这里我们用class来标记button,这样在JS中就可以取出所有的class相同的button作为一组。从而在JS中监听并选定相应行。

 1 <label>出货单单头:</label>
 2                     <asp:Repeater ID="Top_Reapter" runat="server">
 3                         <HeaderTemplate>
 4                             <table id="Top_Table" border="1">
 5                                 <tr>
 6                                     <th hidden="hidden">ID</th>
 7                                     <th>客户ID</th>
 8                                     <th>出货人员</th>
 9                                     <th>创建时间</th>
10                                     <th>更新时间</th>
11                                     <th>编辑</th>
12                                     <th>删除</th>
13                                     <th>新增子信息</th>
14                                 </tr>
15                         </HeaderTemplate>
16                         <ItemTemplate>
17                             <tr>
18                                 <td hidden="hidden"><%#Eval("ship_key")%></td>
19                                 <td><%#Eval("customer_id")%></td>
20                                 <td><%#Eval("ship_man")%></td>
21                                 <td><%#Eval("create_time")%></td>
22                                 <td><%#Eval("update_time")%></td>
23                                 <td>
24                                     <button type="button" class="Top_Edit">编辑</button>
25                                 </td>
26                                 <td>
27                                     <button type="button" class="Top_Delete">删除</button>
28                                 </td>
29                                 <td>
30                                     <button type="button" class="Insert_Line">新增子信息</button>
31                                 </td>
32                             </tr>
33                         </ItemTemplate>
34                         <FooterTemplate></table></FooterTemplate>
35                     </asp:Repeater>

  

  (2)JS部分:通过class来获取相应的一组button并设置监听。然后通过标签名<tr>获取选中行,通过标签名<td>获取选中行所有列数据的一个集合,通过DOM操作将相应的数据显示在前台指定的位置。

 1 /*编辑单头信息*/
 2 var Top_Edit = document.getElementsByClassName("Top_Edit");
 3
 4 for (var i = 0; i < Top_Edit.length; i++) {
 5
 6     Top_Edit[i].index = i;
 7
 8     Top_Edit[i].onclick = function () {
 9
10         var table = document.getElementById("Top_Table");
11
12         /*获取选中的行 */
13         var child = table.getElementsByTagName("tr")[this.index + 1];
14
15         /*获取选择行的所有列*/
16         var SZ_col = child.getElementsByTagName("td");
17
18         document.getElementById("Edit_id").value = SZ_col[0].innerHTML;
19         document.getElementById("edit_customer").value = SZ_col[1].innerHTML;
20         document.getElementById("edit_man").value = SZ_col[2].innerHTML;
21         document.getElementById("Top_Creat_Time").value = SZ_col[3].innerHTML;
22         document.getElementById("Top_Update_Time").value = SZ_col[4].innerHTML;
23
24     }
25 }

  

  JS获取表格数据就这么简单几步。获取表格数据还有jQuery等其他方法,可以多去尝试,然后对比总结,这样对于程序员本身也是一个提高。

转载于:https://www.cnblogs.com/SunshineAgain/p/5744510.html

通过JS获取页面表格选中行信息相关推荐

  1. ElementUI 获取el-table表格选中行信息及清除选中行

    表格 <el-table :data="tableData" border style="width: 100%" ref="multipleT ...

  2. 如何获取layui表格选中行的数据

    在项目中有很多涉及到表格的模块,有时候当你需要保存数据的时候,而这些数据都在表格中你却获取不到,这就让人很苦恼了,所以下面就讲下如何获取layui表格中选中行的数据, 注意这里只是layui表格的获取 ...

  3. js获取页面光标坐标(x轴y轴)

    问题详情 js获取页面光标坐标(x轴y轴) 解决方案 // 获取当前位置 getPosition() {setTimeout(() => {// 获取当前光标位置getSelection()co ...

  4. JS获取浏览器类型和版本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 获取gridview当前选中行的内容

    方法一:SelectedIndex 获取gridview当前选中行的内容 txtid.Text = GridView1.Rows(GridView1.SelectedIndex).Cells(1).T ...

  6. JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法

    JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法 获取input框用户输入信息数组存储 var datas = {Id: idData.id,OrderDetailCode: ...

  7. layerui js获取数据表格中的动态内容on失效live失效

    layerui js获取数据表格中的动态内容on失效live失效.由于jquery1.9版本之后不再使用live,所以改成on,但直接使用on以layer中又不起作用.于是用下面的语句. $(docu ...

  8. 原生js获取html元素高度,js获取页面及个元素高度、宽度的代码

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  9. js: 获取页面最大的zIndex(z-index)值

    js: 获取页面最大的zIndex(z-index)值 // 需要在页面渲染完毕之后执行function getMaxZIndex(){let arr = [...document.all].map( ...

  10. js 获取页面鼠标选中的文字

    js获取页面鼠标选中的文字,最主要的代码 event.selection = window.getSelection(); 页面代码 <div><p class="cont ...

最新文章

  1. 为何每次用完 ThreadLocal 都要调用 remove()
  2. nrf52840开发套件_nRF52840蓝牙5.0模块有几个突出的优势
  3. ORM 关系对象映射 基础知识点
  4. 南怀瑾《处事箴言》摘录
  5. php从大到小排列数字,php输入几个数从大到小排序
  6. 进程间通信(python)
  7. [渝粤教育] 中国地质大学 结晶学与矿物学 复习题 (2)
  8. 0.07 秒启动一个 SpringBoot 项目!
  9. SQL Server查询锁等待
  10. 个人游戏程序开发总结
  11. php把amr转换成mp3,php 微信amr转mp3的方法
  12. mysql建表语句转oracle_求大神将该MySQL建表语句改为oracle的,感激不尽。
  13. SiamRPN代码分析:architecture
  14. 雷风恒:慎终如始;天山遁:大雁南飞
  15. 2 snippets vue 修改配置_vue-snippets: 支持 Vue 3 的语法高亮,代码格式化和代码提示的 Visual Studio Code 插件。...
  16. Excel顶级替代,这个大数据分析工具太好用了
  17. 微信小程序实现页面强制刷新
  18. lterator方法讲解
  19. 苹果6plus性能测试软件,iPhone 6、iPhone6 Plus性能测试
  20. 无卡支付时代 银行信用卡联手京东金融欲打翻身仗

热门文章

  1. MySql 存储过程 光标只循环一次
  2. (原)MobileNetV1
  3. 安装anaconda,jupyter基本操作说明快捷键使用
  4. iOS.UIKit.07.UIAlertView_UIActionSheet
  5. 使用TestNG-xslt美化测试报告
  6. 无法连接 Plugins Market 失效的日子
  7. php对引用的简单理解
  8. IFrame与window对象(contentWindow)
  9. 2018-05-04 http入门
  10. 只显示 前100个字 java 实现截取字符串!使用! c:if test=${fn:length(onebeans.info)100 }${ fn:substri...