Question

我有这张桌子：

<table class="mytbl">
 <thead>
  <tr>
    <th>dyn-tbl-hdr-1</th>  <----these actually are timestamps.
    <th>dyn-tbl-hdr-2</th>
    <th>dyn-tbl-hdr-3</th>
    <th>dyn-tbl-hdr-4</th>
    <th>dyn-tbl-hdr-5</th>
    <th>dyn-tbl-hdr-6</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>20</td>
   <td>50</td>
   <td>60</td>
   <td>20</td>
   <td>50</td>
   <td>60</td>
  </tr>
  <tr>
   <td>33</td>
   <td>5455</td>
   <td>4550</td>
   <td>245</td>
   <td>50566</td>
   <td>5678</td>
  </tr>
  <tr>
   <td>33433</td>
   <td>598455</td>
   <td>894550</td>
   <td>96245</td>
   <td>7050566</td>
   <td>4325678</td>
  </tr>
 </tbody>
</table>

我想只显示那些第一行的值为20（或20和60）的“列”。我想根据任何行的单元格值显示/隐藏列。 objective仅显示给定行中单元格值匹配的列。（因此在上面的示例中仅显示第1行包含20的列（如果用户想要查看20）。我是否只能显示ro1包含20和50的列？我想我需要先选择一行，然后单元格值，然后根据该行和选定的单元格值隐藏列。但我不知道如何在jquery中编写代码。我感谢所有帮助。

在我的app表中是动态生成的。表头不是常量，它们实际上是时间戳。

Answer 1

您可以使用jQuery中的.each函数来处理此问题。

参考：http://api.jquery.com/jQuery.each/

<强>的jQuery ：

$("td").each(function() {
    if ($(this).html() != 20) {
        $(this).css("opacity", "0");
    }
});

JsFiddle ：http://jsfiddle.net/d2arY/

Answer 2

试试这个：

var col = new Array();
$('tr').eq('1').find('td').each(function() {
    if ($(this).text() == 20 || $(this).text() == 50) {
        col.push($(this).index());
    }

});
$('th,td').each(function() {
    if ($.inArray($(this).index(), col)==-1) $(this).hide();
});

<强> jsFiddle example

这将在表的第一个非标题行中搜索20或50的值，并隐藏不具有这些值的列。

Answer 3

$('.mytbl tbody tr:first td').map(function(index, el) {

    if ($(el).text() == 60) 

             return $(el).index();  // get index of td that contain 60

}).each(function(i, val) {  // loop over those index

    $('.mytbl tbody td, .mytbl thead th').each(function() {

        $(this).parent().find('td, th').eq(val).hide(); // hide th and td with
                                                        // similar index
    });
});

<强> Working sample

如何根据行单元格值隐藏/显示表列？

3 个答案: