操作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還有很多零碎的知識點,但是在開發中會經常用到,仍需不斷地總結。  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM