控制dom元素隐藏和显示的几种做法与动态删除和添加表格的几种方法

最新推荐文章于 2024-04-29 20:18:22 发布

没时间喽

最新推荐文章于 2024-04-29 20:18:22 发布

阅读量2.1k

点赞数 3

分类专栏： HTML+CSS+JavaScript 文章标签： css html javascript

本文链接：https://blog.csdn.net/Z15800020057/article/details/131411486

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

控制dom元素隐藏和显示的几种做法

1.style属性的display 被隐藏的控件不再占用显示时占用的位置
this.getElementByXid(‘domXid’).style.display=”none”;
this.getElementByXid(‘domXid’).style.display=”block”;

http://t.csdn.cn/v6mLH 实例及区别在之前文章

2.“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
this.getElementByXid(‘domXid’).style.visibility=”hidden”;
this.getElementByXid(‘domXid’).style.visibility=”visible””;

http://t.csdn.cn/v6mLH 实例及区别在之前文章

3.通过jquery 进行控制显示隐藏
$(this.getElementByXid(‘domXid’)).hide(); // 隐藏
$(this.getElementByXid(‘domXid’)).show(); // 显示

<!DOCTYPE html>
<html>
<head>
	<title>控制DOM元素隐藏和显示</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		function hideElement() {
			$("#myElement").hide();
		}

		function showElement() {
			$("#myElement").show();
		}
	</script>
</head>
<body>
	<button onclick="hideElement()">隐藏元素</button>
	<button onclick="showElement()">显示元素</button>
	<br><br>
	<div id="myElement">这是要隐藏和显示的元素。</div>
</body>
</html>

4.通过bind-visible 绑定KO对象或data组件字段控制隐藏，隐藏后dom节点实际还在

http://doc.wex5.com/data-bind-visible/

5.通过bind-if 绑定KO对象或data组件字段控制隐藏，隐藏后dom节点已经不存在了。

与bind-visible类似，可以控制DOM元素的显示和隐藏。但是，bind-if会在控制元素隐藏时，将DOM元素从页面中删除，以提高页面性能。

bind-if的使用方法和bind-visible类似，只需要将data-bind属性的值设置为if，并将要绑定的KO对象或data组件字段作为参数即可。

<!DOCTYPE html>
<html>
<head>
	<title>使用bind-if控制DOM元素隐藏和显示</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
	<script type="text/javascript">
		var viewModel = {
			isVisible: ko.observable(true)
		};
	</script>
</head>
<body>
	<span>使用bind-if控制DOM元素隐藏和显示：</span>
	<br><br>
	<button data-bind="click: function() { isVisible(!isVisible()); }">切换显示状态</button>
	<br><br>
	<div data-bind="if: isVisible">
		这是要隐藏和显示的元素。
	</div>
</body>
</html>

不过注意的是：bind-if 控制的是当前dom节点下的子节点的存在与否（不包含当前节点），而bind-visible 是控制当前节点下的所有元素的隐藏的（包含当前节点）

使用innerHTML方法

innerHTML方法可以用来动态修改HTML元素的内容，包括表格。可以通过innerHTML方法添加或删除表格。

<!DOCTYPE html>
<html>
<head>
	<title>动态添加和删除表格</title>
	<script type="text/javascript">
		function addTable() {
			var table = document.getElementById("myTable");
			table.innerHTML += '<tr><td>新行1</td><td>新行2</td></tr>';
		}

		function deleteTable() {
			var table = document.getElementById("myTable");
			var rowCount = table.rows.length;
			table.deleteRow(rowCount-1);
		}
	</script>
</head>
<body>
	<button onclick="addTable()">添加行</button>
	<button onclick="deleteTable()">删除行</button>
	<br><br>
	<table id="myTable" border="1">
		<tr>
			<th>列1</th>
			<th>列2</th>
		</tr>
		<tr>
			<td>行1</td>
			<td>行2</td>
		</tr>
	</table>
</body>
</html>

使用DOM方法

通过JavaScript中的DOM方法，可以动态地添加或删除表格行和单元格。

<!DOCTYPE html>
<html>
<head>
	<title>动态添加和删除表格</title>
	<script type="text/javascript">
		function addTable() {
			var table = document.getElementById("myTable");
			var newRow = table.insertRow(-1);
			var cell1 = newRow.insertCell(0);
			var cell2 = newRow.insertCell(1);
			cell1.innerHTML = "新行1";
			cell2.innerHTML = "新行2";
		}

		function deleteTable() {
			var table = document.getElementById("myTable");
			var rowCount = table.rows.length;
			if(rowCount > 1) {
				table.deleteRow(rowCount-1);
			}
		}
	</script>
</head>
<body>
	<button onclick="addTable()">添加行</button>
	<button onclick="deleteTable()">删除行</button>
	<br><br>
	<table id="myTable" border="1">
		<tr>
			<th>列1</th>
			<th>列2</th>
		</tr>
		<tr>
			<td>行1</td>
			<td>行2</td>
		</tr>
	</table>
</body>
</html>

使用jQuery

jQuery是一个流行的JavaScript库，可以简化Web开发中的许多操作，包括动态添加和删除表格。使用jQuery可以更轻松地操作DOM元素。

<!DOCTYPE html>
<html>
<head>
	<title>动态添加和删除表格</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#addBtn").click(function() {
				var newRow = $("<tr><td>新行1</td><td>新行2</td></tr>");
				$("#myTable").append(newRow);
			});

			$("#deleteBtn").click(function() {
				$("#myTable tr:last").remove();
			});
		});
	</script>
</head>
<body>
	<button id="addBtn">添加行</button>
	<button id="deleteBtn">删除行</button>
	<br><br>
	<table id="myTable" border="1">
		<tr>
			<th>列1</th>
			<th>列2</th>
		</tr>
		<tr>
			<td>行1</td>
			<td>行2</td>
		</tr>
	</table>
</body>
</html>