怎么在表格中隐藏一个单元格，但不改变表格的布局
日期：2014-05-16 浏览次数：20392 次
如何在表格中隐藏一个单元格，但不改变表格的布局?
用javascript中用style.display= "none ";可以隐藏掉一格单元格，但整行的布局会乱掉，比如有如下一个表格：
1 2 3 4
5 6 7 8
我隐藏掉3以后,4会往左移动,我现在希望4还在他原来的位置，只不过3被隐藏掉了.
当然我这里只是举个例子，在3的位置其实是一个年月日,由三个select组成,方便用户选择。
------解决方案--------------------
将你的3放入一个DIV中就可以了
<HTML>
<head>
<script language= "javascript ">
function testGG(obj){
obj.style.display= "none ";
}
</script>
</head>
<body>
<table border= "1 ">
<tr> <td> 1 </td> <td> 2 </td> <td> <div onClick= "testGG(this) "> 3 </div> </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>
</table>
</body>
</HTML>
------解决方案--------------------
使用style.visiblity= "hidden ";
------解决方案--------------------
<HTML>
<head>
<script language= "javascript ">
function testGG(obj){
obj.style.display= "none ";
}
</script>
</head>
<body>
<table border= "1 ">
<input type= "checkbox " name= "isShow " value= "0 " checked onclick= "if(this.checked==true) document.getElementById( 'content ').innerHTML= '3 '; else document.getElementById( 'content ').innerHTML= '* ' ">
<tr> <td> 1 </td> <td> 2 </td> <td> <div id= "content " onClick= "testGG(this) "> 3 </div> </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>
</table>
</body>
</HTML>
------解决方案--------------------
用 hidden
用 hidden 1 保存相当于3的那个动态数据
用 hidden 2 保存一个*
然后根据checkbox给那个位子付hidden 1 或 hidden 2
------解决方案--------------------
<HTML>
<head>
<script language= "javascript ">
function testGG(){
content.innerHTML = "* ";
}
function testDD(){
content.innerHTML = " <select> <option> 33333 </option> </select> ";
}
</script>
</head>
<body>
<table border= "1 ">
<tr> <td> 1 </td> <td> 2 </td> <td> <div id= "content "> </div> </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>
</table>
<input type= "button " onClick= "testGG() " value= "hidden ">
<input type= "button " onClick= "testDD() " value= "show ">
</body>
<script language= "javascript ">
testDD();
</script>
</HTML>
在testDD的content.innerHTML = " "中写入你想显示的东西就可以了，写什么都行
------解决方案--------------------
用javascript中用style.display= "none ";可以隐藏掉一格单元格，但整行的布局会乱掉，比如有如下一个表格：
1 2 3 4
5 6 7 8
我隐藏掉3以后,4会往左移动,我现在希望4还在他原来的位置，只不过3被隐藏掉了.
当然我这里只是举个例子，在3的位置其实是一个年月日,由三个select组成,方便用户选择。
------解决方案--------------------
将你的3放入一个DIV中就可以了
<HTML>
<head>
<script language= "javascript ">
function testGG(obj){
obj.style.display= "none ";
}
</script>
</head>
<body>
<table border= "1 ">
<tr> <td> 1 </td> <td> 2 </td> <td> <div onClick= "testGG(this) "> 3 </div> </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>
</table>
</body>
</HTML>
------解决方案--------------------
使用style.visiblity= "hidden ";
------解决方案--------------------
<HTML>
<head>
<script language= "javascript ">
function testGG(obj){
obj.style.display= "none ";
}
</script>
</head>
<body>
<table border= "1 ">
<input type= "checkbox " name= "isShow " value= "0 " checked onclick= "if(this.checked==true) document.getElementById( 'content ').innerHTML= '3 '; else document.getElementById( 'content ').innerHTML= '* ' ">
<tr> <td> 1 </td> <td> 2 </td> <td> <div id= "content " onClick= "testGG(this) "> 3 </div> </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>
</table>
</body>
</HTML>
------解决方案--------------------
用 hidden
用 hidden 1 保存相当于3的那个动态数据
用 hidden 2 保存一个*
然后根据checkbox给那个位子付hidden 1 或 hidden 2
------解决方案--------------------
<HTML>
<head>
<script language= "javascript ">
function testGG(){
content.innerHTML = "* ";
}
function testDD(){
content.innerHTML = " <select> <option> 33333 </option> </select> ";
}
</script>
</head>
<body>
<table border= "1 ">
<tr> <td> 1 </td> <td> 2 </td> <td> <div id= "content "> </div> </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>
</table>
<input type= "button " onClick= "testGG() " value= "hidden ">
<input type= "button " onClick= "testDD() " value= "show ">
</body>
<script language= "javascript ">
testDD();
</script>
</HTML>
在testDD的content.innerHTML = " "中写入你想显示的东西就可以了，写什么都行
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
