当前位置: 代码迷 >> Java Web开发 >> 如何通过复选框动态的改变列
  详细解决方案

如何通过复选框动态的改变列

热度:5044   发布时间:2013-02-25 21:11:07.0
怎么通过复选框动态的改变列
我要实现 通过复选框 动态的显示和隐藏 表格的相应的列 谢谢!!

------解决方案--------------------------------------------------------
如果是指JS控制DHTML的话,常用办法就是利用style来修改:

function setHiddenCol(oTable,iCol) {
 for (i=0;i < oTable.rows.length ; i++)
oTable.rows[i].cells[iCol].style.display = (oTable.rows[i].cells[iCol].style.display=="none")?"block":"none";
}

function setHiddenRow(oTable,iRow) {
oTable.rows[iRow].style.display = (oTable.rows[iRow].style.display == "none")?"block":"none";
}


复选框里面,写事件调用第一个函数就行了。
------解决方案--------------------------------------------------------
document.getElementById("xxx").innerHTML=HTML
------解决方案--------------------------------------------------------
控制display就行了。类似下面的小例子:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checkboxId").bind("click",function(){
$("#tr1").css("display","none");
});
$("#checkboxId2").bind("click",function(){
$("#tr1").css("display","block");
});
});
</script>
</head>
<body>

<table style="width: 70%;">
<tr>
<td>
<input id="checkboxId" type="checkbox"/ >
<label>
隐藏
</label>
<input id="checkboxId2" type="checkbox"/ >
<label>
显示
</label>
<td>
</tr>
</table>

<table style="width: 70%;">
<tr id="tr1">
<td width=80%>
<input type="text" value="隐藏" >
</td>
</tr>
<tr id="tr2">
<td width=80%>
<input id="inputId2" type="text" value="显示">
</td>
</tr>
</table>



</body>
</html>


------解决方案--------------------------------------------------------
通过display控制就行了。类似下面的小例子:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#checkboxId").bind("click",function(){
$("#tr1").css("display","none");
});
$("#checkboxId2").bind("click",function(){
$("#tr1").css("display","block");
});
});
</script>
</head>
<body>

<table style="width: 70%;">
<tr>
<td>
<input id="checkboxId" type="checkbox"/ >
<label>
隐藏
</label>
<input id="checkboxId2" type="checkbox"/ >
<label>
显示
</label>
<td>
</tr>
</table>

<table style="width: 70%;">
<tr id="tr1">
<td width=80%>
<input type="text" value="隐藏" >
</td>
</tr>
<tr id="tr2">
<td width=80%>
  相关解决方案