javascript - 如何在表格行之间显示元素?

标签 javascript css

我有一个表,其中包含与每一行关联的数据。

例如

Column 1      | Column 2
Data            More Data
  Data part a     More Data part a
  Data part b     More Data part b

我需要根据用户的选择在每一行之间显示这些数据。执行此操作的正确方法是什么?

最佳答案

根据@Teemu、@A.O 和@guest 的评论。

Sample fiddle.

还可以通过以下方式检查验证:

快速概念:

<table>
    <tr>
        <td>Cell1</td>
        <td>Cell2</td>
        <td>Cell3</td>
        <td>Cell4</td>
        <td>Cell5</td>
    <tr>
    <tr>
        <td colspan="5" id="content1">
            <div>
               Toggle able content
            </div>
        </td>
    </tr>
</table>

CSS:

[id*=content] {
    background: #eee;
    display: none;
}

JS:

$("input").click(function () {
    var $el = $($(this).data('href'));
    if ($el.is(":visible")) {
        $el.hide();
    } else {
        $el.show();
    }
});

关于javascript - 如何在表格行之间显示元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22820631/

相关文章:

html - 如何为响应式img保留空间(停止跳下来的图 block )

html - 在每个 div 具有相同类的情况下扩展 div 的高度

javascript - 有没有办法将 Apache Velocity 模板文件与任何 HTML 模板引擎(如 Mustache 或 Handlebar.js)一起使用

Javascript 更新进度条,然后切换可见的 div

单击鼠标时,Javascript获取网页上最近的超链接

html - Bootstrap 表的功能区

css 'clip-path' 在 Firefox 中不起作用

javascript - 在 jQuery 中将鼠标悬停在子菜单上时无法保留子菜单

javascript - 使用jquery了解选择表单中未选择的值

php - 更改 Hestia 上的部分顺序