jQueryを使用してテーブルセルの値を取得する方法

213

私はjQueryを使用して各行のテーブルセルの値を取得する方法を考え出そうとしています。

私のテーブルは次のようになります：

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>123</td>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
    <td></td>
  </tr>
  <tr>
    <td>789</td>
    <td></td>
  </tr>
</table>

基本的にテーブルをループして、Customer Id各行の列の値を取得します。

以下のコードでは、各行をループさせるためにこれを実行する必要があることを確認しましたが、行の最初のセルの値を取得する方法がわかりません。

$('#mytable tr').each(function() {
    var cutomerId = 
}

jquery

— ショーン・テイラー
ソース

4

テーブルセルのTD値を取得する方法に関するライブデモ付きの完全なチュートリアルはこちらです。codepedia.info/jquery

— get

306

可能であれば、顧客IDを含むTDのクラス属性を使用して、次のように記述することをお勧めします。

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 });

基本的に、これは他のソリューションと同じです（おそらく、コピーと貼り付けを行ったため）。列を移動したり、顧客IDを配置したりする場合でも、コードの構造を変更する必要がないという利点があります。<span>、クラス属性を保持している場合。

ところで、私はあなたが1つのセレクターでそれを行うことができると思います：

$('#mytable .customerIDCell').each(function() {
  alert($(this).html());
});

それが物事をより簡単にするなら。

— ジェニファー
ソース

4

$（ '＃mytable td.customerIDCell'）。each（function（）{alert（$（this）.html（））;}）; しかし+1

— Matt Briggs

:-)ありがとう-しかし、それをスパンに入れたい場合はどうすればよいですか（私の回答でスパンのフォーマットが間違っている可能性があります！）

— Jennifer

2

trでクラスを使用すると、<tfoot>内に<td>があり（または<th>ではなく<td>を使用している場合）、それらが不要な場合に特に役立ちます。

— フランクルーク

$（ '＃mytable tr'）。each（function（）{var customerId = $（this）.find（ "。customerIDCell"）。html（）;}）;

— Osama khodrog 2012年

しかし、tr htmlも取得したい場合は、何ができるか

— 開発者

132

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    
});

あなたがしていることは、テーブル内のすべてのtrを反復処理し、ループ内の現在のtrの最初のtdを見つけ、その内部のhtmlを抽出することです。

特定のセルを選択するには、インデックスでそれらを参照できます。

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    
});

上記のコードでは、3番目の行の値を取得します（インデックスはゼロベースなので、最初のセルインデックスは0になります）。

jQueryなしでこれを行う方法は次のとおりです。

var table = document.getElementById('mytable'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, customerId;

for (i = 0, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
        continue;
    }
    customerId = cells[0].innerHTML;
}

— アンドレアス・グレヒ
ソース

1

おかげで、jQueryを使用して解析するドキュメントのマークアップを制御できないため、これは私にとってより便利でした。したがって、「td：first」、「td：last」などを使用できることは大きな助けでした。

— 10

1

eq（2）は、3行目ではなく3列目の値を取得します。

— live-love

コードのeq（2）は何ですか？つまり、2はどのtdまたはtrのインデックスですか？

— TechnicalKalsa

@Singh 関数tdによって返されるコレクションのインデックス2の要素find("td")。

— Andreas Grech

私はオプション2のインデックスがrefであるのが好きです。ここでの

— HattrickNZ '18

18

それほど奇妙ではないアプローチ：

$('#mytable tr').each(function() {
    if (!this.rowIndex) return; // skip first row
    var customerId = this.cells[0].innerHTML;
});

これは明らかに、最初ではないセルで動作するように変更できます。

— ジミー
ソース

8

$('#mytable tr').each(function() {
  // need this to skip the first row
  if ($(this).find("td:first").length > 0) {
    var cutomerId = $(this).find("td:first").html();
  }
});

— Strelok
ソース

2

最初の行には<td>ではなく<th>が含まれているため、最初の行をスキップする必要はありません。そのため、データは抽出されません

— Andreas Grech

7

これを試して、

$(document).ready(function(){
$(".items").delegate("tr.classname", "click", function(data){
            alert(data.target.innerHTML);//this will show the inner html
    alert($(this).find('td:eq(0)').html());//this will alert the value in the 1st column.
    });
});

— ニキル・ディネシュ
ソース

1

最初の要素ではなく、2番目の要素のeqは0から始まります

— Claudiu Creanga '10年

4

その列にIDを使用していませんか？と言う：

    <table width="300" border="1">
          <tr>
            <td>first</td>
          </tr>
          <tr>
            <td>second</td>
          </tr> 
          <tr>
            <td>blah blah</td>
            <td>blah blah</td>
            <td id="result">Where the result should occur</td>
          </tr>
    </table>


<script type="text/javascript">
        $('#result').html("The result is....");
</script>

— MOH3n MOH
ソース

4

これは機能します

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children[col].innerHTML = "H!";
        }
    }
});

— デビッド
ソース

2

これを試して：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>

— ムハンマド
ソース

2

$(document).ready(function() {
     var customerId
     $("#mytable td").click(function() {
     alert($(this).html());
     });
 });

— ジティン
ソース

2

実際の例：http : //jsfiddle.net/0sgLbynd/

<table>
<tr>
    <td>0</td>
    <td class="ms-vb2">1</td>
    <td class="ms-vb2">2</td>
    <td class="ms-vb2">3</td>
    <td class="ms-vb2">4</td>
    <td class="ms-vb2">5</td>
    <td class="ms-vb2">6</td>
</tr>
</table>


$(document).ready(function () {
//alert("sss");
$("td").each(function () {
    //alert($(this).html());
    $(this).html("aaaaaaa");
});
});

— ガスメンドホクシャ
ソース