javascript - 通过单击在 jquery 中的表中读取 div 元素值

Question

假设我在 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 都是表格的一行，当我单击每一行时，我想显示 1、4 和 7，这是第一个 div 元素。当我尝试 console.log(document.getElementById("rowID1").innerHTML); 时，我点击的每一行都得到“1”，但我希望它显示不同的值。我无法更改 ID(因此 rowID1 是固定的)。知道如何通过点击获得不同的值吗？

Answer 1

首先，您的 HTML 无效，因为您需要将 td 元素放在 tr 中，应该引用 id 属性，您是在行 class 属性上缺少 =，并且您有很多重复的 id 属性。一旦修复:

<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);
});

Example fiddle