组件：表格

表格组件用于以二维表格形式展示结构化数据，支持设置表头、添加/删除/更新行、获取行数据等操作，是数据管理、报表展示、后台列表等场景的常用组件。表格基于 HTML <table> 元素封装，具有清晰的列结构，便于阅读和操作。

典型使用场景：

数据列表展示（用户列表、订单列表、商品列表）
后台管理系统的数据表格
报表数据呈现（统计报表、财务报表）
简单数据录入与编辑（配合表单使用）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置表头（列标题）	`置表头(...表头数组)`	`表格1.置表头("编号", "姓名", "年龄")`
添加一行数据	`添加一行(...行数据数组)`	`表格1.添加一行(1, "张三", 25)`
删除指定行	`删除行(行索引)`	`表格1.删除行(0)`
更新指定行	`更新行(行索引, ...行数据数组)`	`表格1.更新行(1, 2, "李四", 29)`
获取指定行数据	`取一行(行索引)`	`变量行 = 表格1.取一行(0)`
获取所有行数据	`取项目集合()`	`变量全部 = 表格1.取项目集合()`
清空所有数据	`清空()`	`表格1.清空()`

样式美化参考

表格的样式主要通过继承的视图属性进行调整：

整体容器：通过 宽度、高度、背景颜色、边框、边框圆角 等属性美化表格外观。建议边框圆角设置为 "8px" 以获得圆润效果。
表头样式：表头默认会加粗并具有浅灰色背景，可通过添加 CSS 类或内联样式自定义（如 置内联样式("background-color", "#fafafa")）。
单元格样式：表格内单元格的边框、内边距等可通过 CSS 类统一控制。若需调整字体大小、颜色，可使用继承的 字体大小、文本颜色 等属性，但需注意这些属性作用于整个表格，如需精细化控制，建议使用 CSS 样式表。
斑马纹效果：可通过 CSS 类实现隔行变色，增强可读性。
滚动支持：当表格内容超出容器高度时，可在外层包裹 垂直滚动框 实现滚动。

CSS 美化示例（在项目 CSS 文件中定义）：

/* 表格整体 */
.my-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}
.my-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid #e8e8e8;
}
.my-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e8e8e8;
}
/* 斑马纹 */
.my-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.my-table tbody tr:hover {
    background-color: #e6f7ff;
}

在轻语言代码中应用样式类：

表格1.添加样式类("my-table")

基础示例

创建一个简单的用户信息表格，包含编号、姓名、年龄三列，并填充三行数据。

变量 表格1 = 创建 表格()
表格1.左边 = 50
表格1.顶边 = 50
表格1.宽度 = 400
表格1.边框圆角 = "8px"
表格1.边框 = "1px solid #d9d9d9"

' 设置表头
表格1.置表头("编号", "姓名", "年龄")

' 添加数据行
表格1.添加一行(1, "张三", 25)
表格1.添加一行(2, "李四", 28)
表格1.添加一行(3, "王五", 30)

' 获取第一行姓名并输出
变量 第一行 = 表格1.取一行(0)
调试输出("第一行姓名：" + 第一行[1])

添加组件(表格1)

综合示例：订单管理表格

本示例展示一个包含订单编号、客户、金额、状态、操作按钮的完整表格，并演示添加、删除、更新行的操作。

' ========== 创建表格 ==========
变量 表格_订单 = 创建 表格()
表格_订单.左边 = 20
表格_订单.顶边 = 20
表格_订单.宽度 = 700
表格_订单.边框圆角 = "8px"
表格_订单.边框 = "1px solid #e8e8e8"
表格_订单.添加样式类("order-table")  ' 需在 CSS 中定义样式
添加组件(表格_订单)

' 设置表头（列标题）
表格_订单.置表头("订单编号", "客户", "金额(元)", "状态", "操作")

' ========== 添加初始数据 ==========
变量 初始数据 = [
    [1001, "张三", 299.00, "待付款"],
    [1002, "李四", 188.50, "已发货"],
    [1003, "王五", 520.00, "已完成"],
    [1004, "赵六", 76.00, "待付款"]
]
变量循环(i = 0, 取数组成员数(初始数据), 1)
    变量 行 = 初始数据[i]
    表格_订单.添加一行(行[0], 行[1], 行[2], 行[3], "查看 | 删除")
结束循环

' ========== 创建操作面板 ==========
变量 面板 = 创建 弹性布局()
面板.方向 = "row"
面板.左边 = 20
面板.顶边 = 250
面板.宽度 = 700
面板.间距 = 16
添加组件(面板)

' 输入框：编号
变量 输入_编号 = 创建 单行输入框()
输入_编号.宽度 = 100
输入_编号.提示文本 = "编号"
面板.添加组件(输入_编号)

' 输入框：客户
变量 输入_客户 = 创建 单行输入框()
输入_客户.宽度 = 120
输入_客户.提示文本 = "客户"
面板.添加组件(输入_客户)

' 输入框：金额
变量 输入_金额 = 创建 单行输入框()
输入_金额.宽度 = 100
输入_金额.提示文本 = "金额"
面板.添加组件(输入_金额)

' 下拉框：状态
变量 下拉_状态 = 创建 组合框()
下拉_状态.宽度 = 110
下拉_状态.添加项目("待付款", "pending")
下拉_状态.添加项目("已发货", "shipped")
下拉_状态.添加项目("已完成", "done")
下拉_状态.渲染()
面板.添加组件(下拉_状态)

' 添加按钮
变量 按钮_添加 = 创建 按钮()
按钮_添加.文本 = "添加行"
按钮_添加.背景颜色 = "#1890ff"
按钮_添加.文本颜色 = "#ffffff"
按钮_添加.边框圆角 = "6px"
按钮_添加.宽度 = 90
面板.添加组件(按钮_添加)

' 删除按钮（删除最后一行）
变量 按钮_删除 = 创建 按钮()
按钮_删除.文本 = "删除最后行"
按钮_删除.背景颜色 = "#ff4d4f"
按钮_删除.文本颜色 = "#ffffff"
按钮_删除.边框圆角 = "6px"
按钮_删除.宽度 = 100
面板.添加组件(按钮_删除)

' ========== 业务逻辑 ==========
' 添加行
按钮_添加.置被单击回调((源对象, 事件对象) => {
    变量 编号 = 到整数(输入_编号.内容)
    变量 客户 = 输入_客户.内容
    变量 金额 = 到小数(输入_金额.内容)
    变量 状态文本 = ""
    变量 选中值 = 下拉_状态.取选中值()
    如果(选中值 == "pending")
        状态文本 = "待付款"
    否则 如果(选中值 == "shipped")
        状态文本 = "已发货"
    否则
        状态文本 = "已完成"
    结束 如果
    
    如果(编号 <= 0 或 客户 == "" 或 金额 <= 0)
        弹出提示("请完整填写所有字段")
        返回
    结束 如果
    
    表格_订单.添加一行(编号, 客户, 金额, 状态文本, "查看 | 删除")
    弹出提示("添加成功")
    
    ' 清空输入
    输入_编号.内容 = ""
    输入_客户.内容 = ""
    输入_金额.内容 = ""
})

' 删除最后一行
按钮_删除.置被单击回调((源对象, 事件对象) => {
    变量 总数 = 取数组成员数(表格_订单.取项目集合())
    如果(总数 > 0)
        表格_订单.删除行(总数 - 1)
        弹出提示("已删除最后一行")
    否则
        弹出提示("表格已为空")
    结束 如果
})

函数详解

置表头(...表头数组)

功能： 设置表格的列标题。每列标题对应表格的一列，后续添加的行数据必须与表头数量一致。
参数： 可变参数，每个参数为一个文本型字符串，表示列标题。
返回值： 无。
示例： 表格1.置表头("列1", "列2", "列3")

添加一行(...行数据数组)

功能： 向表格末尾添加一行数据。
参数： 可变参数，每个参数对应一列的值，数量必须与表头列数一致。支持任意数据类型（数值、文本、布尔值等）。
返回值： 无。
示例： 表格1.添加一行(1001, "张三", 25)

删除行(行索引)

功能： 删除指定索引的行。
参数： 行索引（数值型），从 0 开始。
返回值： 无。
示例： 表格1.删除行(0) 删除第一行

更新行(行索引, ...行数据数组)

功能： 更新指定索引行的数据。
参数： 行索引（数值型），后跟可变数量的列值，数量需与表头列数一致。
返回值： 无。
示例： 表格1.更新行(1, 1002, "李四", 26) 将第二行更新为新数据

取一行(行索引)

功能： 获取指定索引行的数据。
参数： 行索引（数值型），从 0 开始。
返回值： 数组，包含该行所有列的值。若索引无效则返回 空。

示例：

变量 行 = 表格1.取一行(0)
如果(行 != 空)
    调试输出("第一列值：" + 行[0])
结束 如果

取项目集合()

功能： 获取表格中所有行数据。
返回值： 二维数组，每个元素为一行数据（数组）。