1

私はこのテーブルを持っています：

<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）である「列」のみを表示したいと思います。行のセル値に基づいて列を表示/非表示にしたい。目的は、特定の行のセルの値が一致する列のみを表示することです。（したがって、上記の例では、行1に20が含まれている列のみを表示します（ユーザーが20を表示したい場合）。ro1に20と50が含まれている列のみを表示できますか？最初に行を選択してから、行を選択する必要があります。セルの値を入力し、その行と選択したセルの値に基づいて列を非表示にします。ただし、これをjqueryでコーディングする方法がわかりません。すべてのサポートに感謝します。

私のアプリでは、テーブルが動的に生成されます。テーブルヘッダーは一定ではなく、実際にはタイムスタンプです。

4

3 に答える 3

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 の例

これにより、テーブルのヘッダー以外の最初の行で 20 または 50 の値が検索され、それらの値を持たない列が非表示になります。

于 2012-07-16T15:55:12.160 に答える
2

.eachこれを処理するには、jQueryの関数を使用できます。

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

jQuery :

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

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

于 2012-07-16T15:48:37.540 に答える
0 
$('.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
    });
});

作業サンプル

于 2012-07-16T16:35:06.907 に答える