從基於樹結構的標識中檢索值

Question

目標：
當您按實例按鈕id =「button_a」的特定按鈕時，應該從id =「a1」中檢索值，然後它應顯示爲alert信息。

問題：
當你有一個100到200行之間的表格時，你不能在JavaScript中硬編碼特定的id名稱。

問題：
當您按下按鈕時，應如何檢索例如id =「a1」的值？

我試過並瞭解到您使用「previousSibling」（http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_previoussibling），但它更復雜，我期望。

<table> 
<tr> 
    <td><div id="a1"><div id="aa1">aa1</div></div></td> 
    <td><div id="a2"><div id="aa2">aa2</div></div></td> 
    <td><button id="button_a"></button></td> 
    <td></td> 
</tr> 
<tr> 
    <td><div id="b1"><div id="bb1">bb1</div></div></td> 
    <td><div id="b2"><div id="bb2">bb2</div></div></td> 
    <td><button id="button_b"></button></td> 
    <td></td>  
</tr> 
<tr> 
    <td><div id="c1"><div id="cc1">cc1</div></div></td> 
    <td><div id="c2"><div id="cc2">cc2</div></div></td> 
    <td><button id="button_c"></button></td> 
    <td></td>  
</tr> 
<tr> 
    <td><div id="d1"><div id="dd1">dd1</div></div></td> 
    <td><div id="d2"><div id="dd2">dd2</div></div></td> 
    <td><button id="button_d"></button></td> 
    <td></td>  
</tr> 
</table> 

Answer 1

如果我理解正確的，你想的第一div內tr按鈕點擊的價值。您可以使用：

$("button").on("click", function() { 
 
    var val = $(this) //referes to the dom element, in this case the button 
 
    .parents("tr") //get ancestor tr of the clicked element(button) 
 
    .find("td:first-child > div") //find first td that has direct child div 
 
    .text(); //get the text value of the div element 
 
    $(this).after("<span>" + val + "</span>");//for test purposes 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div id="a1"> 
 
     <div id="aa1">aa1</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div id="a2"> 
 
     <div id="aa2">aa2</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <button id="button_a">Click!</button> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div id="b1"> 
 
     <div id="bb1">bb1</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div id="b2"> 
 
     <div id="bb2">bb2</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <button id="button_b">Click!</button> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div id="c1"> 
 
     <div id="cc1">cc1</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div id="c2"> 
 
     <div id="cc2">cc2</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <button id="button_c">Click!</button> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div id="d1"> 
 
     <div id="dd1">dd1</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div id="d2"> 
 
     <div id="dd2">dd2</div> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <button id="button_d">Click!</button> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
</table>

參考

.parents()

.find()

:first-child

Answer 2

使用jQuery，您可以輕鬆地按樹瀏覽。你可以做了以下：

$('#button_a').on('click', function(e) { 
    var div_a1 = $(this).closest('tr').find('div').first(); 
    // and so on 
} 

更多的jQuery documentation