经常碰到不显示table的某一行,有时也需要隐藏table的一列.
比如表格有'名称','简介','点击数','发表时间'等,现在想选择隐藏发表时间等.以后是个测试例子:
共有两个html页面,index.html和sub.html
index.html
<html>
<head>
<script>
function select_onClick(){
tempvalue = window.showModelessDialog("sub.html",window,"dialogHeight:570px;dialogWidth:650px;dialogTop:120px;dialogLeft:100px");
if(tempvalue!=null){
}
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="4">
<input type="button" value="选择显示的列" onclick="select_onClick()"></input>
</td>
</tr>
</table>
<table border="1">
<col id="col1">
<col id="col2">
<col id="col3">
<col id="col4">
<tr>
<td>
名称
</td>
<td>
简介
</td>
<td>
点击数
</td>
<td>
发表时间
</td>
</tr>
<tr>
<td>
渔童
</td>
<td>
这天小破孩闲来无事去钓鱼，钓了一条特殊的鱼，也可以说是这条鱼钓到了小...
</td>
<td>
1000
</td>
<td>
2008-1-31 9:07:28
</td>
</tr>
<tr>
<td>
圆蛋风波
</td>
<td>
小丫请小破孩吃饭，让小破孩自带鸡蛋：）因此，小破孩悄悄的走向鸡舍……
</td>
<td>
1099
</td>
<td>
2008-1-1 9:07:45
</td>
</tr>
<tr>
<td>
小破孩再生蛋
</td>
<td>
小破孩前年生了一个蛋，去年又生了一个蛋，今年再生一个蛋……
</td>
<td>
2333
</td>
<td>
2008-2-3 12:34:33
</td>
</tr>
<tr>
<td>
射雕后传
</td>
<td>
中秋节是小破孩的生日，今年破孩小丫已经五岁了。……
</td>
<td>
788
</td>
<td>
2007-2-3 12:34:33
</td>
</tr>
</table>
</body>
</html>
sub.html
<html>
<head>
<script>
function h(){
var c = document.getElementsByName("cb");
var w=window.dialogArguments;
var s="";
for(var i = 0; i < c.length; i++){
var t = w.document.getElementById(c[i].value);
if(c[i].checked){
if(s==""){
s=c[i].value;
}else{
s=s+","+c[i].value;
}
t.style.display="";
}else{
t.style.display="none";
}
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<input type="checkbox" name="cb" value="col1" checked>名称</input>
<input type="checkbox" name="cb" value="col2" checked>简介</input>
<input type="checkbox" name="cb" value="col3" checked>点击数</input>
<input type="checkbox" name="cb" value="col4" checked>发表时间</input>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="确定" onclick="h()"></input>
</td>
</tr>
</table>
</body>
</html>
- src.rar (1.3 KB)
- 描述: 测试代码
- 下载次数: 284
分享到：
相关推荐
我们可以根据用户的选择来显示或隐藏 TABLE 的某些列，从而提高用户体验。 使用 JavaScript 控制隐藏显示 TABLE 特定列可以提高用户体验和交互性。通过使用 Checkbox、COLGROUP 和 COL 元素，我们可以轻松地控制 ...
用js控制table列的显示隐藏 用js控制table列的显示隐藏
### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时，我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如，在报表展示或者数据汇总...
最后，文章提到了对LayuiTable的简单封装，这可能意味着有开发者为了方便隐藏列的操作，会将这些代码封装成函数，使其更易于复用。封装的好处在于，一旦封装好之后，就可以在其他项目中轻松调用这些函数来达到隐藏列...
本示例"el-table实现选择列显示"是关于如何在Element UI的表格组件中实现用户自定义选择列显示的功能。下面我们将详细探讨这一主题。 1. **Element UI的el-table组件** - el-table是Element UI中的核心组件之一，...
综上所述，JavaScript显示或隐藏列涉及到HTML结构的理解，CSS选择器的运用，DOM操作的熟练掌握，以及可能的用户交互和性能优化。理解并熟练运用这些知识点，可以让你在构建动态、交互性强的网页时游刃有余。
重写JTable ctrl+c的内容，实现自己定制的内容输出。
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列...
table.render({ elem: '#test' ,url:'${pageContext.request.contextPath}/findcustomers' ,cols: [[ {align:'center', title: '编号', sort: true,type:'numbers',width:100} ]] ,page: true }); 我们就会...
1. **获取表格数据**：使用 jQuery 的 `$('table tr')` 选择器获取表格中的所有行，然后遍历每一行的单元格 `$('td')`。 2. **比较相邻列**：对于每个单元格，我们需要比较其与前一个单元格的内容。如果内容相同，...
可隐藏列 行、列、单元可以被Disable 每个单元、列可以有Tooltip 等等…… [XPTable] XPTable包含下面的组件： 1. Table, 2. ColumnModel 和它的 Columns, 3. TableModel 和它的 Row 和 Cell, 4. Renderer 5. ...
在Vue.js开发中，Element...实际项目中，你需要根据具体需求进行调整，如处理数据加载、排序逻辑、列选择和隐藏等。记住，关键在于理解和灵活运用Vue.js与Element UI的API，以及对JavaScript对象和数组操作的熟练掌握。
改变table的列宽度，可以拖拽的td表格，表格内文字只显示一行，超过的部分自动隐藏