JavaScriptでtrの行数を知りたい。

Question

JavaScriptでテーブルの各行(tr)の行数を知りたいです。

https://gist.github.com/STAR-ZERO/1948013
このやり方で一応求めることは出来たのですがやはりfor文で回すということもあり、データ件数が増えるとパフォーマンスが悪くなってしまいます。

何かほかにやり方はないでしょうか

よろしくお願いします

Answer 1

maisumakunさん回答にあるような手法が現実的なのだろうと思いますが、純粋にアルゴリズムの問題として捉えると、文字数Nに対して計算量をO(N)からO(log N)のオーダー近くに落とすことはできると思いました。考え方としては古くからあるもので順サーチではなくバイナリーサーチにするというだけのものです。

ただ、テキスト長が充分短い場合や一行あたりの文字数が非常に少ない場合は効率はだんだん落ちてゆき、元のアルゴリズムの方が却って早いということもあると思います。

function getRowCount(elm) {
  var textR = elm.text();
  if (textR.length < 2)
    return 1;

  var textL = textR.substring(0, 1),
      hL = heightOf(textL),
      hR = heightOf(textR);
      rows = 1 + extRowsOf(hL, textL, hR, textR);

  elm.text(textR);
  return rows;

  function heightOf(text) {
    elm.text(text);
    return elm.height();
  }

  function extRowsOf(hL, textL, hR, textR) {
    if (hL === hR)
      return 0;
    var lenL = textL.length,
        lenR = textR.length;
    if (lenL + 1 === lenR)
      return 1;
    var textM = textR.substring(0, Math.floor((lenL + lenR) / 2)),
        hM = heightOf(textM);
    return extRowsOf(hL, textL, hM, textM) + extRowsOf(hM, textM, hR, textR);
  }
}

$('#btn').click(function() {
  alert(getRowCount($('#hoge')));
});

Answer 2

蛇足ですが、こんなので矩形領域のサイズを取得して、

element.getBoundingClientRect - Web API インターフェイス | MDN

element.getClientRects - Web API インターフェイス | MDN

1行当たりのheightで割って算出、なんて技も紹介だけしておきます。

Answer 3

getComputedStyleからlineHeightを取得すれば「1行の高さ」がわかりますので、全体の高さを1行の高さで割れば行数になると思います（もちろん、マージン、パディング、行内に文字以外が入っていたなどでずれることはあるとは思いますが）。

Answer 4

求めている動作と違うかもしれませんが、table内に含まれるtr要素の数が知りたいだけならdocument.querySelectorAll("table tr").lengthで求められます。