html显示隐藏div

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

1

2

3

style="visibility:none"

document，getElementById("typediv1")，style，visibility="hidden"//隐藏

document，getElementById("typediv1")，style，visibility="visible"//显示

通过设置display属性可以使div隐藏后释放占用的页面空间，如下

1

2

3

style="display:none"

document，getElementById("typediv1")，style，display="none"//隐藏

document，getElementById("typediv1")，style，display=""//显

$('#h'），click(function(){//点击隐藏，建议把td的id换成class，这样不管几个td几个tr都能用

if($('#td1')，text()==""){

$('#td1')，parent('tr')，hide()

}

})

显示

$('#s'），click(function(){

$('tr')，show()

})

代码性能不好，可以自己去完善

拓展资料

用tbody隐藏吧div和table不好交叉着用

<table>

<tr><td>显示的</td></tr>

<tbodystyle="display:none">

<tr><td>隐藏的</td></tr>

<tr><td>隐藏的</td></tr>

</tbody>

<tr><td>显示的</td></tr>

</table>

用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。

function displayHideUI()

{

var ui =document.getElementById("bbs")

ui.style.display="none"

}

function displayShowUI()

{

var ui =document.getElementById("bbs")

ui.style.display=""//display为空的话会好使，为block会使后边的空间换行

}

function visibilityHideUI()

{

var ui =document.getElementById("bbs")

ui.style.visibility="hidden"

}

function visibilityShowUI()

{

var ui =document.getElementById("bbs")

ui.style.visibility="visible"

}

</script>

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1新增的值）

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。

marker CSS 中有值marker，不过由于缺乏广泛支持，已经从CSS2.1 中删除。

table 此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似<thead>）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似<tfoot>）。

table-row 此元素会作为一个表格行显示（类似<tr>）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似<colgroup>）。

table-column 此元素会作为一个单元格列显示（类似<col>）

table-cell 此元素会作为一个表格单元格显示（类似<td>和<th>）

table-caption 此元素会作为一个表格标题显示（类似<caption>）

inherit 规定应该从父元素继承display属性的值。

CSS visibility 属性规定元素是否可见。

visible　元素可见。

hidden　元素不可见。

collapse　在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

inherit　从父元素继承 visibility 属性的值。

你在 html 里面写的东西默认情况下就是属于 visibility:visible 即元素可见。当某些情况下，你让元素不可见了：visibility:hidden 再通过一些事件触发后让元素变成可见，就要用到这个visibility:visible。

和display:none的区别，你理解是对的，display:none以后，元素是不占位的。

---