zoukankan      html  css  js  c++  java
  • 操作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还有很多零碎的知识点,但是在开发中会经常用到,仍需不断地总结。  

  • 相关阅读:
    聊天软件项目UDP升级版
    聊天软件项目TCP升级版
    JVM内存管理机制
    Java for循环的几种用法详解
    HashMap解决hash冲突的方法
    Hadoop NameNode 高可用 (High Availability) 实现解析
    Hadoop2.0NameNode HA和Federation实践
    Hadoop2.0中单点故障解决方案总结---老董
    HadoopHA简述
    数据库部分面试题
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/9764557.html
Copyright © 2011-2022 走看看