操作dom获取datatable中的某一行的某一列的数据
需求描述:编辑的时候,点击的那一行,进入后台的验证方法,验证通过后,再进入编辑页面,进入的时候需要把本行<tr>数据中的某一列<td>的值传递过去
思路表述:之前我想的是,给列表每一个tr里都放如一个input隐藏域,值就是需要传递的,后台直接通过 $("# id").val( )获取,后来想想,虽然这么做也可以但是违背了规范“尽量减少标签”,于是就想对datatable做直接的操作,获取数据。
代码:
//html代码
<table id=table1>
<tr th:each="pac : ${list}" th:id="${pac.pacId}"
th:attr="data-pac-name=${pac.pacName},data-pac-code=${pac.pacCode}"
class="trs">
//id是行id 也是该行数据的uuid th:onclick="|editById('${pac.pacId}')|"
// th:attr="data-pac-name=${pac.pacName},data-pac-code=${pac.pacCode}"把需要的数据放到<tr>中 js中可以通过 .data('属性名')获取到这个值
<td th:text="${pac.pacName}">名称</td>
<td th:text="${pac.pacCode}">编码</td>
</tr>
</table> //js代码
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
function check(id){
//获取table1的datatable对应行id的节点
var nodes = $('#table1').DataTable().row('#' + id).nodes();
var pacName= $(nodes[0]).data('pacName');
var pacCode= $(nodes[0]).data('pacCode');
// nodes[0]表示当前行 和list.get(0)作用类似 data()方法来取值
// data('pacCode')中的pacCode是和th:attr="data-pac-code=${pac.pacCode}"的 data-pac-code对应,H5新特性,取值的时候会自动还原为data-pacCode,表示data下的属性pacCode
}
/*pacName和pacCode拼到进入后台方法的url中 该部分代码省略*/
</script>
总结:操作dom真的可以帮助我们节省很多资源,不过在调试的时候,只有获取到前一个对象节点的时候,后边才能取到值,调试挺废时间的。datatable操作dom还有很多零碎的知识点,但是在开发中会经常用到,仍需不断地总结。
操作dom获取datatable中的某一行的某一列的数据的更多相关文章
- 【转载】C#如何获取DataTable中某列的数据类型
在C#的数据表格DataTable的操作中,有时候因为业务需要,我们需要获取到DataTable所有列或者某一列的数据类型,此时我们可以通过DataTable中的Columns属性对象的DataTyp ...
- 【转载】C#手动往DataTable中末尾新增一行数据
在C#中的Datatable数据变量的操作过程中,需要手动往DataTable变量的末尾新增一行数据,例如一个实际的例子,我们做数据报表,在最后一行可能需要新增一行DataRow数据作为一个汇总记录, ...
- NPOI操作Excel导入DataTable中
using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System.Data; using System.IO; using NPOI.X ...
- 如何用python获取文件中的某一行——python小技巧
很多人有的时候只需要获取文章中的固定的一行,那么我知道这一行,我需要怎么样去获取呢 可能会有人说读取这一行,如果这一行是已什么开头的就读出来, 其实还有一种办法,就是我知道文件的路径.知道我要取的行数 ...
- 获取redis中所有的key,清空整个 Redis 服务器的数据
获取 redis 中所有的 key 可用使用 *. redis 127.0.0.1:6379> KEYS * Redis Flushall 命令用于清空整个 Redis 服务器的数据(删除所有数 ...
- 如何删除datatable中的一行数据
在C#中,如果要删除DataTable中的某一行,大约有以下几种办法: 1,使用DataTable.Rows.Remove(DataRow),或者DataTable.Rows.RemoveAt(ind ...
- 【转载】C#通过IndexOf方法获取某一列在DataTable中的索引位置
在C#中的Datatable数据变量的操作过程中,有时候需要知道某一个列名在DataTable中的索引位置信息,此时可以通过DataTable变量的Columns属性来获取到所有的列信息,然后通过Co ...
- jQuery权威指南(第2版) 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- C# 对DataTable中按条件进行筛选和更新。
当我们频繁的对数据库进行操作时,可能造成CPU使用率过高,这时我们可以先将数据表读取到DataTable,然后在必要的时候再更新到数据库中. 以下是DataTable中对数据的选择和更新操作.采用Da ...
随机推荐
- 【JS】正则向前查找和向后查找
正向查找:就是匹配前面或后面是什么内容的,所以分类是:正向前查找,正向后查找 负向查找:就是匹配前面或后面不是什么内容的,所以分类是:负向前查找,负向后查找 操作符 说明 描述 (?=exp) 正 ...
- (4)java数据结构--集合类及其数据结构归纳-有大图
Java集合类及其数据结构归纳 - s小小的我 - 博客园http://www.cnblogs.com/shidejia/p/6433788.html ---------大图可以 在新标签中打开图片 ...
- Git更新远程仓库代码到本地(转)
参考链接:https://blog.csdn.net/chailyuan/article/details/53292031 在下载一个较大的github项目以后,当该项目代码更新以后,我们想将更新的内 ...
- vue 学习笔记—Resource
1.首先是引入 或者用npm来安装 cnpm i vue-resource --save(推荐) 3.提供的api 关于请求写法: get(){ // get请求 this.$http.get( ...
- c/C++编译的程序占用的内存分为以下几个部分
首先要搞清楚编译程序占用的内存的分区形式:一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)—由编译器自动分配释放,存放函数的参数值,局部变量的值等 ...
- Java HashMap工作原理及实现[转]
原文:http://yikun.github.io/2015/04/01/Java-HashMap%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE ...
- C++中的static关键字总结
C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...
- [Docker]CentOS7通过rpm包安装Docker
前几天写过一篇文章:[Docker]CentOS7下Docker安装教程,直接使用yum命令下载Docker即可.但是前提是你需要***,所以这篇文章来讲讲,如果不会***,该如何安装Docker. ...
- 非常好的一篇对linux信号(signal)的解析 (转载)【转】
转自:https://blog.csdn.net/return_cc/article/details/78845346 Linux信号(signal) 机制分析 转载至:https://www.cnb ...
- python按照文件创建日期整理文件至文件夹
# -*- coding: utf-8 -*- # @Time : 2019-02-15 13:31 # @Author : cxa # @File : sortbydate.py # @Softwa ...