1

次のようなhtmlのテーブル構造があるとします。

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 1 </div>
   <div id=rowID2 > 2 </div>
   <div id=rowID3 > 3 </div>

  </div>
</tr>

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 4 </div>
   <div id=rowID2 > 5 </div>
   <div id=rowID3 > 6 </div>

  </div>
</tr>

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 7 </div>
   <div id=rowID2 > 8 </div>
   <div id=rowID3 > 9 </div>

  </div>
</tr>

各 tr はテーブルの行であり、各行をクリックすると、最初の div 要素である 1、4、および 7 が表示されます。クリックしたすべての行を試しconsole.log(document.getElementById("rowID1").innerHTML);てみると「1」が表示されますが、異なる値を表示したいです。ID を変更できません (したがって、rowID1 は固定されています)。クリックして異なる値を取得する方法について何か考えはありますか?

4

5 に答える 5

4

tdまず、要素を 内に配置する必要があるため、HTML が無効ですtr。属性は引用符で囲む必要があり、行属性idが欠落しており、繰り返される属性がたくさんあります。それが修正されたら：=classid

<table>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">1</div>
                <div class="rowID2">2</div>
                <div class="rowID3">3</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">4</div>
                <div class="rowID2">5</div>
                <div class="rowID3">6</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">7</div>
                <div class="rowID2">8</div>
                <div class="rowID3">9</div>
            </div>
        </td>
    </tr>
</table>

この jQuery コードは機能します。

$('.Row div').click(function() {
    var idx = $(this).index() + 1;
    var values = $('.rowID' + idx).map(function() {
        return this.innerText;
    }).get().join(',');

    alert(values);
});

フィドルの例

于 2013-10-23T11:37:40.113 に答える
3

最初の HTML コードは一意である必要があるため、すべての「myRow」を削除するか、それらを変更してください。ここで、コードの下でクリックして各 div の値を取得すると、問題が解決する場合があります。

<table>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">1</div>
                <div class="rowID2">2</div>
                <div class="rowID3">3</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">4</div>
                <div class="rowID2">5</div>
                <div class="rowID3">6</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">7</div>
                <div class="rowID2">8</div>
                <div class="rowID3">9</div>
            </div>
        </td>
    </tr>
</table>

このようにhtmlを更新します。次に、ここにあなたの解決策があります:-

$("table tr").on("click",function(e){

   var targetNode = e.target, parentNode, childNode, firstChildValue,
   hasChild=(targetNode.children.length>0) ? 1:0;

   parentNode = (hasChild) ? targetNode.children[0]: targetNode.parentNode; // get parent node of target node
   child = parentNode.children; // get all its children
   firstChildValue = child[0].innerHTML; // get value of first child
   alert(firstChildValue);
});

フィドルの例

お役に立てば幸いです。

于 2013-10-23T11:59:50.037 に答える
1

ID は一意である必要があるため、ID は意味的に間違っている可能性がありますが、ID を引用符で囲む必要があると思います。

各関数を使用して ID をループする必要があります。jsfiddleに投稿したコードは次のとおりです

$(function(){

            $('div#myRow').click(function(){

                $('div#rowID1').each(function(){

                    var text = $(this).text();

                    alert(text);

                });
            });
        });

ID rowID1 の子 div のみを取得するには、次のようにします。

$(function(){
$('div#myRow').click(function(){

    var text = $(this).children('#rowID1').text();

    alert(text);

    });

});
于 2013-10-23T11:48:57.290 に答える
0

ご存じのとおり、get by id は常に 1 つの要素のみを返しidました。これは、同一である必要があるためですが、get by class は常に配列を返し、誰も見つからなかった場合は[](空の配列) を返しました。jquery次のように使用して自分自身を確認できます。

$('#anyId')<-- IDで取得

$('.anyClassName')<-- クラス名で取得

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-1.8.1.min.js"></script>

<script>
    $(function() {
      $('.Row div').click(function(e) {
        var currentDiv = $(e.currentTarget);
        currentClass = currentDiv.attr('class');
        console.log($('.' + currentClass).text());
      });

    });
</script>

</head>

<body>
<table>
<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 1 </div>
   <div class=rowID2 > 2 </div>
   <div class=rowID3 > 3 </div>

  </div>
</tr>

<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 4 </div>
   <div class=rowID2 > 5 </div>
   <div class=rowID3 > 6 </div>

  </div>
</tr>

<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 7 </div>
   <div class=rowID2 > 8 </div>
   <div class=rowID3 > 9 </div>

  </div>
</tr>
</table>
</body>
</html>
于 2013-10-23T11:59:57.080 に答える