繁体   English   中英

切换表格显示:不是第一列

Toggle display of table :not first column

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个表,开始仅显示第一列:

#tablegrid tr td:not(:first-child) {
  display:none;
}

单击按钮时如何显示所有其他列?

以下是我尝试的方法:

  $(document).on('click', '#revealbutton', function() {
    $("<style> #tablegrid tr td:not(:first-child) { display:show; } <\/style>").appendTo("head");
  });
5 个回复

将代码编辑为display:table-celldisplay: show

 $(document).on('click', '#revealbutton', function() { $("<style> #tablegrid tr td:not(:first-child) { display:table-cell; } <\\/style>").appendTo("head"); }); 
 #tablegrid tr td:not(:first-child) { display:none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tablegrid"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <button id="revealbutton">click me</button> 

如果我理解正确,您可以做这样的事情

 $("button").on("click", function(){ $("table tr td:not(:first-child)").hide(); }); 
 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>remove</button> <table> <tr> <td>adsa</td> <td>asdas</td> <td>adasd</td> <td>adad</td> <td>adasd</td> <td>asdasd</td> </tr> </table> </html> 

试试这个,现在添加!

 $('#revealbutton').on('click', function() {
    $("<style> #tablegrid tr td:not(:first-child) { display:show; } </style>").appendTo("head");
  });

让我知道是否有帮助!

您有正确的代码,但这只是Opening script标签。 替换为: <style>/*A code here*/</style>也许只是令人困惑? 除此之外,万事俱备。

  $(document).on('click', '#revealbutton', function() { $("<style> #tablegrid tr td:not(:first-child) { display:show; } <\\/style>").appendTo("head"); }); 
 #tablegrid tr td:not(:first-child) { display:none; } 
 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <table> <tr id=tablegrid> <td>1</td> <td>2</td> </tr> </table> </body> </html> 

这应该是源代码。

希望这会有所帮助!

除非我误解了您的问题,否则我认为您已经使事情变得复杂了。 为什么不只使用.show()

$(document).on('click', '#revealbutton', function() {
    $('#tablegrid tr td').show();
});

它在JSFiddle中工作

1 css显示:表格第一列太宽

我有一个像这样的css表设置: 该表的CSS是: 当它站立时,两列在表格宽度占据的空间之间均匀分开。 我试图让第一列只有占据它的单元格的文本所需的宽度 该表是未知宽度,列/单元格也是如此。 ...

2 显示:表和jQuery切换

我正在尝试使用jquery切换以及css display:table实现某种下拉菜单。 问题在于,列仅适合可见元素(确实有道理...),但是,一旦用户切换隐藏元素,结果就会很糟糕。 由于我的英语不好,请检查下面的小提琴,您将明白我的意思... 在此先感谢Vincent ...

3 3切换表列的排序

我有一桌食物和卡路里。 我找到了一些摘要,以便我对卡路里列ASC和DESC进行排序。 但是我想做的就是让它也回到第三次单击时的原始显示。 因此,在页面加载时,表是按一定顺序排列的。 第一次单击时,它将按卡路里列中的值以升序对表格进行排序,第二次单击时,将以降序进行排序。 在第三次点击后 ...

4 如何切换表格栏?

我试图通过在每列的标题中提供一个按钮来切换表格列,当用户单击该按钮时,该特定列应被隐藏,而当用户再次单击它时,则应将其打开。 但我的问题是,当用户单击标题中的按钮时,我无法隐藏该按钮,因此我隐藏了整个列。 谁能建议我如何使用jquery做到这一点? 您可以看到如下图 谢谢, ...

6 显示mysql表中id列的前4位数字

我有一个从数据库中提取信息的会话 我想在网页中显示此ID的“较短”版本作为“短ID”。 id是16位数我想只显示前4位数。 我试过了 但它只给了我一个奇怪的数字: 原始ID是: 5383082256288945所以我想显示: 5383 ...

2013-06-09 06:08:57 3 576   php
8 jQuery Mobile表切换列

我正在使用JQuery Mobile 1.4。 如何在表加载时设置列隐藏或未选中状态。 这是我的代码的一部分: 如何在默认情况下隐藏“评论”列或在“列”选项中未选中它? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM