`

js显示隐藏 table 的行和列

 
阅读更多

<SCRIPT LANGUAGE="JavaScript">    

<!--    

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"?"":"none";     }    

}    

function setHiddenRow(oTable,iRow)

{  oTable.rows[iRow].style.display = oTable.rows[iRow].style.display == "none"?"":"none";   }    

//-->    

</SCRIPT> 

 

 

<BODY>    

<TABLE id="Table1" cellSpacing="1" cellPadding="1" border="1">      

<TR> <TD>00</TD> <TD>01</TD> <TD>02</TD></TR>    

<TR> <TD>10</TD> <TD>11</TD> <TD>12</TD></TR>    

<TR> <TD>20</TD> <TD>21</TD> <TD>22</TD></TR>    

</TABLE> 

<INPUT id="btnHiddenCol" type="button" value="显示/隐藏第2列" name="btnHiddenCol" onclick="setHiddenCol(document.getElementById('Table1'),1)">     

<INPUT id="btnHiddenRow" type="button" value="显示/隐藏第2行" name="btnHiddenRow" onclick="setHiddenRow(document.getElementById('Table1'),1)">     

</BODY> 

分享到：
| 网站变灰色的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js控制隐藏显示table特定列

    JavaScript 控制隐藏显示 TABLE 特定列 ...使用 JavaScript 控制隐藏显示 TABLE 特定列可以提高用户体验和交互性。通过使用 Checkbox、COLGROUP 和 COL 元素，我们可以轻松地控制 TABLE 的显示和隐藏。

    bootstrap控制table列的显示隐藏

    用js控制table列的显示隐藏 用js控制table列的显示隐藏

    table 选择隐藏列

    在实际开发中，可能有现成的库如datatables.js等，提供了方便的方法来控制表格列的显示和隐藏。 在压缩包文件"src"中，如果包含源码，我们可以期待看到相关的HTML、CSS和JavaScript代码示例，这些示例可能展示了...

    js 显示/隐藏某些列

    综上所述，JavaScript显示或隐藏列涉及到HTML结构的理解，CSS选择器的运用，DOM操作的熟练掌握，以及可能的用户交互和性能优化。理解并熟练运用这些知识点，可以让你在构建动态、交互性强的网页时游刃有余。

    js 实现 用JavaScript隐藏或显示表格列

    js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!

    javascript万能table合并单元格，隐藏列 html版

    这里仅对第二列和第三列进行了控制。 #### 四、完整代码解读 在 HTML 文件中，我们可以通过按钮触发这些函数，实现对表格的操作。 ```html 合并" onclick="uniteTdCells('dd')"&gt; 显示" onclick="closeTD('dd')"&gt; ...

    jQuery获取table下某一行某一列的值实现代码

    8. 显示隐藏的元素值：即使单元格元素通过CSS的display:none被隐藏了，仍然可以使用上述方法获取到其值。 9. 处理特殊情况：文中提到了如果需要获取特定列的值，可以修改.find("tr").children("td")中的参数，例如....

    el-table无限滚动+控制列是否显示+列排序（非json）

    在Vue.js开发中，Element...实际项目中，你需要根据具体需求进行调整，如处理数据加载、排序逻辑、列选择和隐藏等。记住，关键在于理解和灵活运用Vue.js与Element UI的API，以及对JavaScript对象和数组操作的熟练掌握。

    Table 表格 表头表尾浮动显示

    "Table 表格 表头表尾浮动显示" 是一种优化表格用户体验的技术，它允许用户在滚动浏览长表格时，表头（thead）和表尾（tfoot）始终保持可见，方便用户对照和理解数据。这种技术尤其适用于移动端或者空间有限的界面，...

    el-table实现选择列显示.zip

    - Vue会自动响应数据变化并重新渲染视图，从而实现列的动态显示和隐藏。 7. **实际应用中的优化** - 为了提高用户体验，可以添加列的选择全选/全不选功能，通过一个主复选框控制所有列的显示状态。 - 考虑到性能...

    CSS 美化Table,可以多选Table的行和列

    2. **CSS隐藏与显示**：使用CSS的`:checked`伪类来选择已勾选的复选框，并通过`display`属性控制关联行或列的可见性。 3. **事件监听**：使用JavaScript监听复选框的`change`事件，当用户点击时更新相关行或列的状态...

    动态的显示table列

    这篇博客文章“动态的显示table列”可能探讨了如何在JavaScript环境中，尤其是使用jQuery库来实现这一功能。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在处理表格列的动态显示时...

    table列显示控制插件

    总的来说，"table列显示控制插件"是JavaScript在网页开发中的一项实用技巧，它利用DOM操作和事件处理机制，实现了Table列的动态显示与隐藏，提高了用户界面的可操作性和数据可视化的效率。通过理解这个插件的工作...

    jquery table 合并相同列

    首先，理解需求：在表格中，如果相邻的列（column）内容相同，我们将其合并成一个单元格，只显示一次内容，这样可以使表格看起来更整洁，减少重复信息，从而提升用户对页面内容的理解和感知。 要实现这个功能，我们...

    关于Layui Table隐藏列问题

    也就是说，即便某列被隐藏了，但在JavaScript中仍然可以通过列名或`data-field`来访问该列的数据，前提是这些数据在后端是存在的。 总结一下，隐藏Layui表格的列需要进行两步操作： - 获取表格容器的jQuery对象。 -...

    javascript表格常用操作 表头排序 表头固定 列隐藏 行隐藏

    本教程将重点讲解如何实现"javascript表格常用操作"，包括"表头排序"、"表头固定"、"列隐藏"、"行隐藏"以及"悬浮变色"等功能。这些功能可以极大地提升用户体验，使得数据浏览和管理更加便捷。 首先，我们来谈谈...

    element-ui 中的table的列隐藏问题解决

    // 切换显示隐藏状态 } } ``` 此外，还可以使用组件的 slot 功能来自定义列的内容。通过具名插槽，你可以更加灵活地控制内容的显示与隐藏，甚至可以插入自定义的 DOM 结构。 如果需要在切换显示和隐藏时避免页面...

Magicbox
Global site tag (gtag.js) - Google Analytics