Question

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

但是这次我仍然在努力寻找一个简单的解决方案，就像我在这里使用的代码一样。（在W3Schools上找到）我已经看过一些非常先进和复杂的隐藏/显示表功能，但我正在完成下面的事情。点击时，当前代码非常容易隐藏整体。我想知道，如果可以将相同的列应用于列。

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

PS：我理解HTML＆amp; 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>

Answer 1

尝试

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

演示：Fiddle

Answer 2

如果要隐藏N列<：p>

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

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

Answer 3

使用此代码：

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

jsfiddle is here

Answer 4

试试这个： 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();
    });
});

Answer 5

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

您只需删除表格中每列的td。你必须找到td你有该表的点击索引。例如00,01,11..33用于二维表（3 * 3）。

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

为您的表<td id="td-00"提供ID。

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

用于隐藏列的简单Jquery代码

5 个答案: