使用 jQuery 隐藏表格列

发布于 2024-12-24 17:11:54 字数 848 浏览 0 评论 0原文

这个问题被问过很多次了,我知道,但这次不一样!我做了这个:

在此处输入图像描述

当您单击减号图标时,该列应该消失,这适用于 php,但代码一团糟,我想用 jQuery 来实现这一点,我发现其他一些线程向我展示了这一点:

$("#minus").click(function() {
    $("#table td:nth-child(2),th:nth-child(2)").hide();
});

过了一会儿我想出了这个:

var num = $("#columnid").index();    
$("#table td:nth-child("+ num +"),th:nth-child("+ num +")").hide();

那有点工作,但我需要用 a 来调用它onclick="jquery_function();" 函数并让 php 插入每个标头的 id,但这可能吗?或者这样做的其他方法是什么?我被困住了!

这样做了:

$(".minus").click(function() {
    var num = $(this).parent().index() + 1;
    $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").fadeOut(250);
});

弄清楚后看起来很简单,Jeroen 是对的。 :) 我唯一不明白的是为什么你需要(“th”),无论有没有。谢谢!

This was asked many times, I know but this is different! I made this:

enter image description here

When you click on the minus icon, the column should disappear, this worked with php, but the code is a mess and I would like to get this working with jQuery, i found some other threads that showed me this:

$("#minus").click(function() {
    $("#table td:nth-child(2),th:nth-child(2)").hide();
});

After a while I came up with this:

var num = $("#columnid").index();    
$("#table td:nth-child("+ num +"),th:nth-child("+ num +")").hide();

That kinda worked, but i need to call it with a onclick="jquery_function();" function and let php insert the id of every header, but is this possible? Or what is the other way of doing this? i'm stuck!

This did it:

$(".minus").click(function() {
    var num = $(this).parent().index() + 1;
    $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").fadeOut(250);
});

Seems simple after figuring out, Jeroen had it right. :) The only thing i dont get is why you need the ("th"), works with and without. Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你丑哭了我 2024-12-31 17:11:54

看来你已经快完成了。您可以做的是将其包装在一个函数中并将事件处理程序附加到表标题单元格中的按钮:

$("th .button").click(function(){
  var num = $(this).parents("th").index();    // untested, but something like this should do it
  $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").hide();
  return false;
}

It seems you've almost got it complete. What you could do, is wrap it in a function and attach the event handler to the button in the table header cell:

$("th .button").click(function(){
  var num = $(this).parents("th").index();    // untested, but something like this should do it
  $("#table td:nth-child("+ num +"),th:nth-child("+ num +")").hide();
  return false;
}
葬﹪忆之殇 2024-12-31 17:11:54

这个怎么样?

// note the class for multiple minus
$(".minus").click(function () {
  var $this = $(this);
  var index = $('.minus').index($this); // get the zero based index of this element
  index++; // adjust for zero based index
  var selector = '#table td:nth-child(' + index + '), the:nth-child(' + index + ')';
  $(selector).hide();
});

未经测试,可以随意省略您认为合适的代码。

How about this?

// note the class for multiple minus
$(".minus").click(function () {
  var $this = $(this);
  var index = $('.minus').index($this); // get the zero based index of this element
  index++; // adjust for zero based index
  var selector = '#table td:nth-child(' + index + '), the:nth-child(' + index + ')';
  $(selector).hide();
});

Untested, and feel free to omit code as you see fit.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文