0

这是我第一次在 StackOverflow 上发布。原因是，每次我在 stackoverflow 搜索它时，我总是找到一个解决方案。

然而这次我仍然在努力寻找一个简单的解决方案，比如我在这里使用的代码。（在 W3Schools 上找到）我已经查看了一些非常高级和复杂的隐藏/显示表功能，但我只追求如下所示的东西。当前代码在点击时很容易隐藏一个整体。我想知道，是否可以将相同的内容应用于列。

我尝试使用 col, colgroup 但它不起作用。有人可以建议吗？也尝试应用 TH，但这也不起作用。

PS：我非常了解 HTML 和 CSS，以及一些非常基本的 PHP，我很少使用 Jquery，但还不能完全阅读和理解 javascript，以进行自己的修改或编写自己的代码。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<table width="800" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td bgcolor="#6600FF">9</td>
    <td bgcolor="#6600FF">10</td>
    <td bgcolor="#6600FF">11</td>
    <td bgcolor="#6600FF">12</td>
  </tr>
  <tr>
    <td bgcolor="#CCCC66">13</td>
    <td bgcolor="#CCCC66">14</td>
    <td bgcolor="#CCCC66">15</td>
    <td bgcolor="#CCCC66">16</td>
  </tr>
  <tr>
    <td bgcolor="#FF9966">17</td>
    <td bgcolor="#FF9966">18</td>
    <td bgcolor="#FF9966">19</td>
    <td bgcolor="#FF9966">20</td>
  </tr>
  <tr>
    <td bgcolor="#993399">21</td>
    <td bgcolor="#993399">22</td>
    <td bgcolor="#993399">23</td>
    <td bgcolor="#993399">24</td>
  </tr>
</table>

<blockquote>&nbsp;</blockquote>
</body>
</html>
4

5 回答 5

4

尝试

$(document).ready(function(){
    $("td").click(function(){
        var idx = $(this).index();
        $('table tr').find('td:eq(' + idx + ')').hide()
    });
});

演示：小提琴

于 2013-10-15T10:00:09.757 回答
0

如果要隐藏 N 列：

$('tr').each(function() {
    $('td', $(this)).eq(N).hide()
});

请注意，第一列的 N = 0 和第四列的 N = 3。

于 2013-10-15T10:02:06.407 回答
0

使用此代码：

$(document).ready(function(){
  $("tr td").click(function(){
    $(this).hide();
  });
});

jsfiddle 在这里

于 2013-10-15T10:02:39.410 回答
0

试试这个：http: //jsfiddle.net/CPpYU/

$(document).ready(function () {
    $("td").click(function () {
        var td = this;
        var tr = $(td).parent("tr");
        var column = tr.children().get().indexOf(td);
        console.log(column + "OO");
        $("td:nth-child(" + column + ")").hide();
    });
});
于 2013-10-15T10:07:53.143 回答
0

那么这很简单，但首先你必须了解你的任务。

您必须只删除表格每一列的 td 。你必须找到 td 你有那个表的点击索引。例如 00 ,01,11..33 用于二维表 (3*3)。

  • 如果您的索引是其中之一 00,10,20 然后将它们全部隐藏<td>.(first column)
  • 如果您的索引是其中之一 01,11,21 然后将它们全部隐藏<td>.(second column)
  • 如果您的索引是其中之一 02,13,24 然后将它们全部隐藏（第三列）

给你的桌子 id <td id="td-00"。

谢谢，但我没有给你完整的代码，但它是你问题的最简单解决方案。大部分是 jQuery 的 5 行代码。

于 2013-10-15T10:10:53.653 回答