Как настроить таргетинг на конкретную ячейку таблицы с помощью jQuery?

Question

Я пытаюсь получить #id конкретной ячейки таблицы в переменной, используя jQuery, но не имея большой удачи. Может ли кто-нибудь предложить какой-нибудь совет? Я сделал скрипку here.

HTML

<input type="button" id="button" value="Click Me" /> 

<table id="myTable1"> 
    <tbody> 
    <tr> 
     <td id="1"> 
     cell 1 
     </td> 
     <td id="2"> 
     Get the id of this cell 
     </td> 
     <td id="3"> 
     cell 2 
     </td> 
    </tr> 
    </tbody> 
</table> 

JQuery

$(document).ready(function() { 
    $("#button").click(function() { 
    var td = $(this).closest('table').attr('id'); //find table id 
    alert(td); 
    }); 
}); 

Answer 1

Вот ПЕРВОЕ РЕШЕНИЕ Если вы хотите, чтобы получить все идентификаторы из каждой ячейки. Надеюсь, поможет!

$(document).ready(function() { 
 
$("#button").click(function() { 
 
    var ids = []; 
 
    $("tr > td").each(function(index){ 
 
    ids.push($(this).attr("id")); 
 
    }); 
 
    alert(ids); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<input type="button" id="button" value="Click Me" /> 
 

 
<table id="myTable1"> 
 
    <tbody> 
 
    <tr> 
 
     <td id="1"> 
 
     cell 1 
 
     </td> 
 
     <td id="2"> 
 
     Get the id of this cell 
 
     </td> 
 
     <td id="3"> 
 
     cell 2 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Вот ВТОРОЕ РЕШЕНИЕ, если вы хотите увидеть идентификаторами один за другим.

$(document).ready(function() { 
 
$("#button").click(function() { 
 
    $("tr > td").each(function(index){ 
 
    alert($(this).attr("id")); 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<input type="button" id="button" value="Click Me" /> 
 

 
<table id="myTable1"> 
 
    <tbody> 
 
    <tr> 
 
     <td id="1"> 
 
     cell 1 
 
     </td> 
 
     <td id="2"> 
 
     Get the id of this cell 
 
     </td> 
 
     <td id="3"> 
 
     cell 2 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>