在jquery中，jtable方法用于創(chuàng)建基于Ajax的CRUD表格，是一個(gè)表格擴(kuò)展插件，并且不需要進(jìn)行html和JavaScript編碼，語(yǔ)法為“<script src="jquery.jtable.min.js路徑" type="text/javascript"></script>”。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery中jtable方法怎么用

jTable 是一個(gè) jQuery 插件用來(lái)創(chuàng)建基于 Ajax 的 CRUD 表格，無(wú)需進(jìn)行 HTML 和 JavaScript 編碼。

下載后增加：

將這些行添加到 HTML 文檔的HEAD部分：

<!-- 包括其中一種 jTable 樣式。--> <link href="/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" /> <!-- 包含jTable腳本文件。--> <script src="/jtable/jquery.jtable.min.js" type="text/javascript"></script>

您可以在主題文件夾中選擇任何主題和顏色模式。

注意：您還必須在導(dǎo)入 jTable 文件之前添加所需 的 jQuery 和 jQueryUI JavaScript 和 CSS 文件。

創(chuàng)建容器

jTable 只需要一個(gè)用于表格的容器元素。

<div id="PersonTableContainer"></div>

創(chuàng)建一個(gè) jTable 實(shí)例

將這些 JavaScript 代碼添加到您的頁(yè)面：

<script type="text/javascript">      $(document).ready(function () {          $('#PersonTableContainer').jtable({              title: '人員表',              actions: {                  listAction: '/GettingStarted/PersonList '，                 createAction：'/GettingStarted/CreatePerson'，                 updateAction：'/GettingStarted/UpdatePerson'，                 deleteAction：'/GettingStarted/DeletePerson'              }，             字段：{                  PersonId：{                     鍵：true，                     列表：false                  }，                 名稱(chēng)：{                     標(biāo)題：'作者姓名'，                     寬度：'40%'                  }，                 年齡：{                     標(biāo)題：'年齡'，                     寬度：'20%'                  }，記錄日期                 ：{                     標(biāo)題：'記錄日期'，                     寬度：'30%'，                     類(lèi)型：'日期'，                     創(chuàng)建：假，                     編輯：假                 }              }          }）；     });  </腳本>

視頻教程推薦：jQuery視頻教程