# table-demo

**Repository Path**: zing173/table-demo

## Basic Information

- **Project Name**: table-demo
- **Description**: 基于 JQuery 实现对表格的 CRUD 操作
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-13
- **Last Updated**: 2024-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 基于 jQuery 实现表格的 CRUD

### 一、页面设计的三个步骤

第一：使用 HTML 结构化页面

第二：使用 CSS 样式修饰页面

第三：使用 JS 实现页面的动态效果或页面交互操作



### 二、定义对象

#### 1、语法

```javascript
// 文本标记法 - 用于数据的表示，便于数据的传递
// JSON：字符串，是 JavaScript 对象的字符串表示 
var 对象名称 = {
    属性名称1:值 ,
    ...
    属性名称N:值
}
```



#### 2、说明

其中，

- 值可以是任意类型的数据，
  - 比如：字符串、数值、对象、数组、函数
- 属性与属性之间使用逗号分隔
  - 最后一个属性可以不加逗号



### 三、定义数组

**语法**

```javascript
// 文本标记法创建数组
var 数组名称 = [数据1,数据2,...,数据N] ;
```



### 四、技术总结

- 网页三剑客：CSS、HTML、JavaScript

- 选择器

  - `:selected`、`:checked`、`:eq(索引)`、
  - find
  - filter
  - closest

- DOM操作

  - append
  - remove
  - prop
  - show / hide
  - text / html / val

- 事件处理

  - 常见事件类型：click、dblclick、change等等

  - 简单事件绑定

    ```js
    节点对象.事件方法(function(){
        // 事件逻辑处理...
    }) ;
    ```

  - 动态节点事件绑定

    ```js
    // 注意：父节点对象必须是页面加载时已存在的节点
    // 而子节点对象可以是已存在的节点，
    // 也可以是页面动态创建的节点
    父节点对象.on("事件类型","子节点对象",function(){
        // 事件逻辑处理 ...
    }) ;
    ```