本篇文章主要讲述HTML+CSS入门之轻松实现数据表格的增删改查功能，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<table id="configEdatagrid" data-toggle="topjui-edatagrid"
       data-options="id:'configEdatagrid',
       idField:'uuid',
       reloadAfterSave:true,
       url:'../../json/config/config_1.json', //获取表格数据地址
       saveUrl:_ctx + '/json/response/save.json',   //保存
       updateUrl:_ctx + '/json/response/update.json',  //更新
       destroyUrl:_ctx + '/json/response/delete.json'">  //删除
    <thead>
    <tr>
        <th data-options="field:'uuid',title:'UUID',checkbox:true"></th>
        <th data-options="field:'type',title:'类型',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th>
        <th data-options="field:'sort',title:'排序',sortable:true,editor:{type:'numberspinner',options:{required:true,height:30}}"></th>
        <th data-options="field:'name',title:'名称',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th>
        <th data-options="field:'code',title:'代码',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th>
        <th data-options="field:'value',title:'值',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th>
        <th data-options="field:'description',title:'描述',sortable:true,editor:{type:'textbox',options:{required:true,height:30}}"></th>
        <th data-options="field:'creator',title:'创建人',sortable:true"></th>
        <th data-options="field:'createTime',title:'创建时间',sortable:true"></th>
    </tr>
    </thead>
</table>
 
<!-- 表格工具栏 -->
<div id="configEdatagrid-toolbar" data-options="grid:{
           type:'edatagrid',
           id:'configEdatagrid'
       }">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'edatagrid',
       extend: '#configEdatagrid-toolbar',
       iconCls:'fa fa-plus',
       btnCls:'topjui-btn-green',
       type:'addRow'">新增</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'edatagrid',
       extend: '#configEdatagrid-toolbar',
       iconCls:'fa fa-save',
       btnCls:'topjui-btn-brown',
       type:'saveRow'">保存</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'edatagrid',
       extend: '#configEdatagrid-toolbar',
       iconCls:'fa fa-remove',
       btnCls:'topjui-btn-black',
       type:'cancelRow'">取消</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'edatagrid',
       extend: '#configEdatagrid-toolbar',
       iconCls:'fa fa-remove',
       btnCls:'topjui-btn-blue',
       type:'destroyRow'">删除</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'filter',
       extend: '#configEdatagrid-toolbar',
       btnCls:'topjui-btn-black'">过滤</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'search',
       extend: '#configEdatagrid-toolbar',
       btnCls:'topjui-btn-blue'">查询</a>
</div>

仅仅一点点html代码，不用写js 就可以动态加载表格数据并且实现基本的增删改查功能，是不是特别简单呢。

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！