<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML >
<HEAD >
<TITLE >New Document</TITLE >
<script language="javascript" >
function filterOnclick()
{
if(filter.value =="filter")
{
filter.value = "recover";
for(i=0; i <5;i++)
{
if(Checkbox1[i].checked == false)
{
for(j=0;j <Table1.rows.length;j++)
{
Table1.rows(j).cells(i).style.display= "none";
}
}
}
}
else if(filter.value == "recover")
{
filter.value = "filter";
for(i=0; i <5;i++)
{
Checkbox1[i].checked = false;
for(j=0;j <Table1.rows.length;j++)
{
Table1.rows(j).cells(i).style.display= "block";
}
}
}
}
</script >
</HEAD >
<BODY >
<P >
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1" >
<TR >
<TD width="20%" ><INPUT id="Checkbox1" type="checkbox" name="Checkbox1" >
</TD >
<TD width="20%" ><INPUT id="Checkbox2" type="checkbox" name="Checkbox1" >
</TD >
<TD width="20%" ><INPUT id="Checkbox3" type="checkbox" name="Checkbox1" >
</TD >
<TD width="20%" ><INPUT id="Checkbox4" type="checkbox" name="Checkbox1" >
</TD >
<TD width="20%" ><INPUT id="Checkbox5" type="checkbox" name="Checkbox1" >
</TD >
</TR >
<TR >
<TD width="20%" ><FONT face="MS UI Gothic" >商品 </FONT > </TD >
<TD width="20%" ><FONT face="MS UI Gothic" >単価 </FONT > </TD >
<TD width="20%" ><FONT face="MS UI Gothic" >规格 </FONT > </TD >
<TD width="20%" ><FONT face="MS UI Gothic" >単位 </FONT > </TD >
<TD width="20%" ><FONT face="MS UI Gothic" >类别 </FONT > </TD >
</TR >
<TR >
<TD width="20%" >aa </TD >
<TD width="20%" >1.00 </TD >
<TD width="20%" >guige1 </TD >
<TD width="20%" >个 </TD >
<TD width="20%" >食品 </TD >
</TR >
<TR >
<TD width="20%" >bb </TD >
<TD width="20%" >1.50 </TD >
<TD width="20%" >guige2 </TD >
<TD width="20%" >台 </TD >
<TD width="20%" >果物 </TD >
</TR >
<TR >
<TD width="20%" >cc </TD >
<TD width="20%" >1.00 </TD >
<TD width="20%" >guige3 </TD >
<TD width="20%" >人 </TD >
<TD width="20%" >野菜 </TD >
</TR >
</TABLE >
</P >
<INPUT id="filter" type="button" value="filter" name="Button1" onclick="filterOnclick()" >
</BODY >
</HTML >
分享到：
相关推荐
8. **源码分析**：博客链接指向的`div-dd.htm`可能包含一个简单的例子，展示了如何使用JavaScript和CSS来操作一个`<div>`元素的拖放功能，这与显示/隐藏列的功能是相关的，因为它们都涉及到DOM的动态操作。...
js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!
JavaScript 控制隐藏显示 TABLE 特定列 在 HTML 中，我们经常需要控制 TABLE 的显示和隐藏，特别是在数据表格中，需要根据用户的选择来显示或隐藏某些列。今天，我们将介绍使用 JavaScript 控制隐藏显示 TABLE 特定...
在压缩包文件"src"中，如果包含源码，我们可以期待看到相关的HTML、CSS和JavaScript代码示例，这些示例可能展示了如何在实际项目中实现“table 选择隐藏列”的功能。 总之，理解并掌握如何在HTML和CSS中控制表格列...
### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时，我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如，在报表展示或者数据汇总...
5. **动态添加和隐藏列**： 如果列是在运行时动态添加的，那么需要在添加后立即设置其可见性。同时，也可以使用DataGrid的AutoGenerateColumns属性来自动根据数据源生成列，然后通过循环遍历所有列来控制它们的可见...
主表控制明细列隐藏显示
总结起来，`Datatable`隐藏列的方法主要包括在初始化时设置`visible`属性和使用`columns().visible()`方法进行动态控制。同时，配合CSS样式，我们可以打造出符合业务需求且视觉效果良好的数据表格。了解并熟练掌握...
用js控制table列的显示隐藏 用js控制table列的显示隐藏
JS控制明细列显示隐藏 同时控制字段必填属性.js
【js模板】根据主表字段显示或隐藏明细表指定列
最后，文章提到了对LayuiTable的简单封装，这可能意味着有开发者为了方便隐藏列的操作，会将这些代码封装成函数，使其更易于复用。封装的好处在于，一旦封装好之后，就可以在其他项目中轻松调用这些函数来达到隐藏列...
对于列隐藏，我们同样可以操作对应的`<th>`和`<td>`元素，但需要注意的是，隐藏列可能会影响到其他列的布局，所以需要额外处理。 "悬浮变色"是指鼠标悬停在表格行或单元格上时改变背景色，以提供视觉反馈。这可以...
总之，jQuery是一个强大且易用的JavaScript库，它可以轻松实现如隐藏列和列排序等功能。在网页开发中，了解并掌握jQuery的使用是提高效率的关键。同时，利用像DataTables这样的插件，可以进一步扩展jQuery的功能，以...
- 隐藏列时确保不会影响到数据的完整性，特别是当涉及到编辑和更新操作时。 通过以上知识点的介绍，相信读者已经对如何使用`GridView`控件动态隐藏某列有了较为深入的理解，并能够将其应用到实际项目中去。
easy-UI 右键列头，控制列的显示和隐藏,是啊easyui拓展的功能之一，只需引入此js代码，即可产生效果，右键列名，控制列的显示和隐藏