js tr td 显示隐藏

在JavaScript中，tr（表格行）和td（表格单元格）元素的显示与隐藏通常是通过修改它们的CSS display属性来实现的。以下是一些基础概念、方法以及示例代码：

基础概念

• DOM元素：tr和td是HTML DOM（文档对象模型）中的元素，可以通过JavaScript进行操作。
• CSS display属性：控制元素的显示方式，如block、none等。

显示与隐藏的方法

1. 通过修改style.display属性： 直接设置元素的style.display属性为"none"来隐藏元素，设置为""（空字符串）或"table-row"/"table-cell"来显示元素。
2. 通过添加/移除CSS类： 定义一个CSS类，该类设置display: none;，然后使用JavaScript添加或移除这个类。

示例代码

方法一：直接修改style.display

// 获取元素，例如通过ID
var trElement = document.getElementById('myTr');
var tdElement = document.getElementById('myTd');

// 隐藏元素
trElement.style.display = 'none';
tdElement.style.display = 'none';

// 显示元素
trElement.style.display = ''; // 或者 'table-row'
tdElement.style.display = ''; // 或者 'table-cell'

方法二：添加/移除CSS类

首先，在CSS中定义一个用于隐藏元素的类：

.hidden {
    display: none;
}

然后，在JavaScript中添加或移除这个类：

// 获取元素
var trElement = document.getElementById('myTr');
var tdElement = document.getElementById('myTd');

// 隐藏元素
trElement.classList.add('hidden');
tdElement.classList.add('hidden');

// 显示元素
trElement.classList.remove('hidden');
tdElement.classList.remove('hidden');

应用场景

• 数据筛选：当用户选择显示特定条件的数据时，可以隐藏不符合条件的tr或td。
• 分页：在分页显示数据时，隐藏不在当前页的数据行。
• 交互式表格：用户点击按钮时显示或隐藏额外的信息单元格。

注意事项

• 隐藏tr元素时，其包含的所有td元素也会被隐藏。
• 如果表格中有多个tr或td需要独立控制显示隐藏，确保它们的ID或类名是唯一的，以便精确操作。

通过上述方法，你可以灵活地控制表格中行的显示与隐藏，以适应不同的应用场景和用户需求。