从基于树结构的标识中检索值

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