Как вытащить атрибут href внутри элемента таблицы

Question

У меня есть таблица, и каждая ячейка таблицы имеет определенный URL-адрес. Я пытаюсь получить URL-адрес на определенной ячейке, используя jquery. Проблема здесь не в том, что класс или идентификатор не определены для таблицы, строки и столбца. Просто хочу вытащить атрибут href только с помощью тегов.

  <table> 
      <tr> 
       <td><a href='MytestSite11.com'>site21</a></td> 
       <td><a href='MytestSite12.com'>site22</a></td> 
       <td><a href='MytestSite13.com'>site23</a></td> 
      </tr> 
      <tr> 
       <td><a href='MytestSite21.com'>site21</a></td> 
       <td><a href='MytestSite22.com'>site22</a></td> 
       <td><a href='MytestSite23.com'>site23</a></td> 
      </tr> 
      <tr> 
       <td><a href='MytestSite31.com'>site21</a></td> 
       <td><a href='MytestSite32.com'>site22</a></td> 
       <td><a href='MytestSite33.com'>site23</a></td> 
      </tr> 
     </table> 

Я пытаюсь получить элемент href второго столбца второй строки, который является MytestSite22. Я пробовал следующий код jquery, но он возвращает меня undefine. Не уверен, что пропущено на этом.

 $(function() { 
      var $row = $('table tr').eq(1); 
      var $col=$row.eq(1) 
      alert($col.attr('href')); 
     }); 

Answer 1

Вы забыли указать элемент в вашей второй переменной:

var $col=$row.find('td').eq(1) 

Затем укажите якорь внутри что:

alert($col.find('a').attr('href')); 

Для чего это стоит, доллар характер как префикс переменной обычно используется для указания массива или набора. Здесь вы используете его на одном элементе.

Answer 2

Это простой способ сделать это:

var $row = $('table tr:nth-child(2)'), // row 
    $col = $row.children('td:nth-child(2)'), // column 
    $a = $col.children('a'); // anchor 

alert($a.attr('href')); 

Селектор :nth-child(n) будет соответствовать элемент, который под некоторым индексом среди детей общего родительского элемента. Обратите внимание, что это 1 на основе, а не 0 на основе (как массивы JavaScript, например), так что второй ребенок :nth-child(2), третий ребенок будет :nth-child(3) и т.д.

Вот CodePen example.

Answer 3

здесь его HREF элемент второй строки второго столбца

$("table tr:eq(1) td:eq(1) a").attr("href"); 

Answer 4

вы можете просто сделать все это на одном дыхании: $('table tr:nth-child(2) td:nth-child(2) a').attr('href');

$(document).ready(function() { 
 
    alert($('table tr:nth-child(2) td:nth-child(2) a').attr('href')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td><a href='MytestSite11.com'>site21</a></td> 
 
     <td><a href='MytestSite12.com'>site22</a></td> 
 
     <td><a href='MytestSite13.com'>site23</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href='MytestSite21.com'>site21</a></td> 
 
     <td><a href='MytestSite22.com'>site22</a></td> 
 
     <td><a href='MytestSite23.com'>site23</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href='MytestSite31.com'>site21</a></td> 
 
     <td><a href='MytestSite32.com'>site22</a></td> 
 
     <td><a href='MytestSite33.com'>site23</a></td> 
 
    </tr> 
 
</table>

Answer 5

Попробуйте это:

var a = $("tr").eq(1).find("td").eq(1).find("a").attr("href"); 
alert(a); 

Answer 6

Также одна из возможностей, где вы можете получить значение с помощью функции:

getMe(RowNumber,ColumnNumber);

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script> 
    $(document).ready(function(e) { 
     getMe(2,2); 
    }); 

    function getMe(rowN, colN) { 
     var link = $("tr:eq("+(rowN-1)+") td:eq("+(colN-1)+") a").attr("href"); 
     alert(link); 
    } 
</script>