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

控制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(); // 显示

	
	
	


	隐藏元素
	显示元素
	


	
这是要隐藏和显示的元素。

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组件字段作为参数即可。

	
	
	


	使用bind-if控制DOM元素隐藏和显示：
	


	切换显示状态
	


	

		这是要隐藏和显示的元素。
	

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

使用innerHTML方法

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

	
	


	添加行
	删除行
	


	

		

			
列1
			
列2
		
		

			
行1
			
行2
		
	

使用DOM方法

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

	
	


	添加行
	删除行
	


	

		

			
列1
			
列2
		
		

			
行1
			
行2
		
	

使用jQuery

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

	
	
	


	添加行
	删除行
	


	

		

			
列1
			
列2
		
		

			
行1
			
行2