1

th6つの要素があるとしましょう

    <thead>
      <tr><th></th><th></th><th></th> <th></th><th></th><th></th></tr>
    </thead>

最初の4つだけを繰り返したいと思います。これらの要素の反復可能なリストを取得して、次のようなことができるようにするにはどうすればよいですか。

    while (i < myLimit) {
          th = thlist[i];
          // do something : if somecondition myLimit +=1;
          i++;
    }
    return i;

th要素は装飾されており、その一部はthstyle="display:none" で装飾されており、任意に選択された要素の左側にそのような装飾された要素がいくつあるかを把握しようとしています。

注: 反復中に myLimit を増やす必要がある場合があります!!

4

4 に答える 4

1

次のように、getElementByTagName javascript 純粋関数を使用できます。

function getStyle(elem, cssprop, cssprop2){
 // IE
 if (elem.currentStyle) {
   return elem.currentStyle[cssprop];

 // other browsers
 } else if (document.defaultView &&
                   document.defaultView.getComputedStyle) {
   return document.defaultView.getComputedStyle(elem,
null).getPropertyValue(cssprop2);

 // fallback
 } else {
   return null;
 }
}


var ths = document.getElementsByTagName('th');
var myLimit = 4;

var max = ths.length;

if (myLimit>max)
    myLimit = max;

for (var i = 0;i < myLimit; i++) {
    // do something with myarray[i]
    var th = ths[i];
    if (getStyle(th,'display','display')=='none')
        alert('th in position '+i+' is decorated with display:none');
}

これはhttp://jsfiddle.net/aJ8MS/の実際の動作例です

于 2013-02-01T14:30:20.560 に答える
0

テーブルの行とセルにアクセスする簡単な方法は、組み込みのプロパティを使用することです。通常、ヘッダーは最初の行にあります（これはあなたの質問の場合です）。したがって、thsはtable.rows[0]に含まれるセルです。

var table=document.getElementById("myTable"),
    i=0,
    count=0,
    myLimit=4;
while (i < myLimit) {
    if (table.rows[0].cells[i].style.display=="none") { count ++; }
    i++;
}
return count;
于 2013-02-01T16:35:45.750 に答える
0

次のように、最初の 4 (または n) 要素を収集できます。

var limit = 4,
    $ths = $('th:not(:nth-child('+limit+') ~ th)', 'thead');

次に、たとえば .each() を使用して繰り返します。

$ths.each(function() {
  console.log(this);
});

jsfiddle

または別のアプローチ：

var limit = 4,
    $ths = $('th', 'thead');

$ths.each( function() {
    var id = $(this).index();
    if(id < limit) {
        console.log(this);
        // increase limit on certain condition
        if(id == 2) limit++;
    }
});

return limit;

jsfiddle

display: none要素に単純な要素があるかどうかを確認するには:

$this.is(':hidden')
于 2013-02-01T15:13:13.970 に答える
0

私はサンディノの解決策から始めて、ディスプレイなしのスタイルにクリストフのチェックを使用しました。

この状況で難しいのは、剣道グリッドを使用していることです。このグリッドは、グリッドを 2 つのテーブルに分割します。1 つはヘッダー用、もう 1 つはボディ行用です。body-grid には表示される列のみが含まれるのに対し、header-grid には非表示の列についても定義があるため、一部の列が非表示になっている場合、2 つのテーブルの列数が異なる可能性があります。

グリッドに 12 列あり、最初の 7 列が非表示になっているとします。header-grid には 12 個すべてが含まれ、最初の 7 個は display:none で装飾されています。content-grid には、5 つの表示列のみが含まれています。したがって、ユーザーが最初に表示されている列 (インデックス 0) をクリックすると、実際にはヘッダー グリッドの 8 番目の列に対応します (0 ベースなので、インデックス = 7)。

VisibleIndex 0 に対応する列ヘッダーを見つけるには、クリックされたセルのインデックスに、その左側にある非表示の列の数を追加する必要があります。0 に 7 を足すと 7 になります。

 function countHiddenColumnHeadersLeft(id, clickedCellIndex) {    
    var ths = document.getElementById(id).getElementsByClassName('k-header');
    var myLimit = clickedCellIndex;   


    var invisicount = 0;

    for (var i = 0; (i < myLimit) ; i++) {        
      var th = ths[i];
      if (th.style.display == 'none') {
            invisicount++;
            myLimit++;
        }        
    }
    return invisicount;
}
于 2013-02-01T19:36:59.403 に答える