这个 `HierarchyTable` 类是一个功能强大的 JavaScript 类，用于管理层次结构表格。它提供了多种功能，包括动态添加和删除表格行、自定义事件监听器、行选择和取消选择、以及根据特定条件执行操作等。以下是对该类的一些关键功能的详细解释：
### 主要功能
1. **动态添加和删除行**：
- `addZeroLevel()`：添加零级行（即根级别的行）。
- `addLevel(event)`：在指定行下添加子行。
- `removeLevel(event)`：删除指定行及其所有子行。
2. **事件监听器**：
- `addEventListener(eventName, listener)`：添加自定义事件监听器。
- `dispatchEvent(eventName, row, level, index)`：分发自定义事件。
- `registerEventListeners(eventHandlers)`：注册配置中的事件监听器。
3. **行选择和取消选择**：
- `EnableRowSelection()`：启用行选择功能，点击行时会在行的 `class` 中添加 `selected`。
- `GetSelectedRow()`：获取当前选中的行。
- `SelectRowByIdentity(identity)`：根据 `identity` 选中行。
- `DeselectRow()`：取消选中当前选中的行。
4. **其他功能**：
- `ClearAllRows()`：清理表格中的所有行。
- `PerformAction(identity, action, key)`：根据 `identity` 执行相应的操作，如添加或删除行。
- `FindRowByKey(key)`：根据 `key` 查找行。
=========================================
这个 `HierarchyTable` 类是一个用于管理层次结构表格的 JavaScript 类。它允许用户通过按钮动态添加和删除表格行，并且支持自定义事件监听器来处理行添加和删除的操作。以下是对这个类的详细解释：
###
HTMLElement 增加子级方法有哪些，可否直接写入html
在 HTML 中，`HTMLElement` 可以通过多种方式增加子级。以下是几种常见的方法：
### 1. 使用 `innerHTML` 属性
```javascript
const parentElement = document.getElementById('parent');
parentElement.innerHTML = 'New Child
';
```
### 2. 使用 `appendChild` 方法
```javascript
const parentElement = document.getElementById('parent');
const newChild = document.createElement('div');
newChild.textContent = 'New Child';
parentElement.appendChild(newChild);
```
### 3. 使用 `insertBefore` 方法
```javascript
const parentElement = document.getElementById('parent');
const newChild = document.createElement('div');
newChild.textContent = 'New Child';
const referenceNode = parentElement.firstChild; // 插入到第一个子节点之前
parentElement.insertBefore(newChild, referenceNode);
```
### 4. 使用 `insertAdjacentHTML` 方法
```javascript
const parentElement = document.getElementById('parent');
parentElement.insertAdjacentHTML('beforeend', 'New Child
');
```
### 5. 使用 `insertAdjacentElement` 方法
```javascript
const parentElement = document.getElementById('parent');
const newChild = document.createElement('div');
newChild.textContent = 'New Child';
parentElement.insertAdjacentElement('beforeend', newChild);
```
### 6. 使用 `insertAdjacentText` 方法
```javascript
const parentElement = document.getElementById('parent');
parentElement.insertAdjacentText('beforeend', 'New Child');
```
### 直接写入 HTML
如果你希望直接在 HTML 中写入子元素，可以在 HTML 文件中直接编写：
```html
HTMLElement Child Example
```
### 总结
- **`innerHTML`**: 直接设置元素的 HTML 内容。
- **`appendChild`**: 将一个元素添加为另一个元素的最后一个子元素。
- **`insertBefore`**: 在指定元素之前插入一个新元素。
- **`insertAdjacentHTML`**: 在指定位置插入 HTML 字符串。
- **`insertAdjacentElement`**: 在指定位置插入一个元素。
- **`insertAdjacentText`**: 在指定位置插入文本内容。
这些方法可以根据你的需求选择使用。
如何查找tr下第一个td
要查找 `tr` 元素下的第一个 `td` 元素，可以使用多种方法。以下是几种常见的方法：
### 1. 使用 `querySelector` 方法
```javascript
const trElement = document.querySelector('tr');
const firstTd = trElement.querySelector('td');
```
### 2. 使用 `getElementsByTagName` 方法
```javascript
const trElement = document.querySelector('tr');
const tds = trElement.getElementsByTagName('td');
const firstTd = tds[0];
```
### 3. 使用 `childNodes` 和 `firstChild` 方法
```javascript
const trElement = document.querySelector('tr');
const firstTd = trElement.firstChild;
while (firstTd && firstTd.nodeType !== 1) { // 确保找到的是元素节点
firstTd = firstTd.nextSibling;
}
```
### 4. 使用 `children` 方法
```javascript
const trElement = document.querySelector('tr');
const firstTd = trElement.children[0];
```
### 示例代码
以下是一个完整的示例，展示了如何查找 `tr` 元素下的第一个 `td` 元素：
如何查找tr下最后一个td
要查找 `tr` 元素下的最后一个 `td` 元素，可以使用多种方法。以下是几种常见的方法：
### 1. 使用 `querySelector` 方法
```javascript
const trElement = document.querySelector('tr');
const lastTd = trElement.querySelector('td:last-child');
```
### 2. 使用 `getElementsByTagName` 方法
```javascript
const trElement = document.querySelector('tr');
const tds = trElement.getElementsByTagName('td');
const lastTd = tds[tds.length - 1];
```
### 3. 使用 `childNodes` 和 `lastChild` 方法
```javascript
const trElement = document.querySelector('tr');
let lastTd = trElement.lastChild;
while (lastTd && lastTd.nodeType !== 1) { // 确保找到的是元素节点
lastTd = lastTd.previousSibling;
}
```
### 4. 使用 `children` 方法
```javascript
const trElement = document.querySelector('tr');
const lastTd = trElement.children[trElement.children.length - 1];
```
### 示例代码
以下是一个完整的示例，展示了如何查找 `tr` 元素下的最后一个 `td` 元素：
如何查tr下指定索引的TD
要查找 `tr` 元素下指定索引的 `td` 元素，可以使用多种方法。以下是几种常见的方法：
### 1. 使用 `getElementsByTagName` 方法
```javascript
const trElement = document.querySelector('tr');
const tds = trElement.getElementsByTagName('td');
const index = 1; // 指定索引，例如第二个 td
const specifiedTd = tds[index];
```
### 2. 使用 `querySelectorAll` 方法
```javascript
const trElement = document.querySelector('tr');
const tds = trElement.querySelectorAll('td');
const index = 1; // 指定索引，例如第二个 td
const specifiedTd = tds[index];
```
### 3. 使用 `children` 方法
```javascript
const trElement = document.querySelector('tr');
const index = 1; // 指定索引，例如第二个 td
const specifiedTd = trElement.children[index];
```
### 示例代码
以下是一个完整的示例，展示了如何查找 `tr` 元素下指定索引的 `td` 元素：
```html
Find Specified TD in TR
| First TD |
Second TD |
Third TD |
```
### 总结
- **`getElementsByTagName`**: 获取所有 `td` 元素，然后通过索引访问指定元素。
- **`querySelectorAll`**: 获取所有 `td` 元素，然后通过索引访问指定元素。
- **`children`**: 获取所有子元素，然后通过索引访问指定元素。
这些方法可以根据你的需求选择使用。