Работа с выборкой элементов в jQuery

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Работа с выборкой элементов в&nbsp;jQuery</title>
     <link rel="stylesheet" href="styles.css">
     <script src="/js/jquery-3.6.0.min.js"></script>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <table>
      <tr><td>Слово</td><td>Перевод</td></tr>
      <tr><td>Table</td><td>Стол</td></tr>
      <tr><td>Fork</td><td>Вилка</td></tr>
      <tr><td>Spoon</td><td>Ложка</td></tr>
      <tr><td>Door</td><td>Дверь</td></tr>
      <tr><td>Home</td><td>Дом</td></tr>
      <tr><td>House</td><td>Жилье</td></tr>
      <tr><td>Hand</td><td>Рука</td></tr>
      <tr><td>Foot</td><td>Нога</td></tr>
      <tr><td>Plane</td><td>Самолет</td></tr>
     </table>
   
     <button id="myButton">Нажми меня</button>
    </body>
   
   </html>

CSS–разметка (styles.css):

   table		{ border-collapse: collapse; border: 0; width: 100%; }
   td			{ border: 1px solid #d0d0d0; text-align: center; padding: 10px; }
   
   #myButton		{ width: 140px; height: 30px; border: 1px solid #d0d0d0; background-color: #f0f0f0; color: #000000; outline: none; margin-top: 20px; }

JS–скрипты (scripts.js):

   window.onload = function()
   {
    document.getElementById('myButton').onclick = function()
    {
     $("tr:even").each(function(index, element)
     {
      alert((index+1)+": "+element.innerHTML);
     });
     var trArray = $("tr:even");
     alert('Первый нечетный элемент: '+trArray.first().html());
     alert('Последний нечетный элемент: '+trArray.last().html());
     $("tr:even").add("tr:odd:first").each(function(index, element)
     {
      alert((index+1)+": "+element.innerHTML);
     });
     trArray.eq(1).css('background-color', 'lightgrey');
    };
   };

Работа с выборкой элементов в jQuery

Задание:

html-документ (index.html):

CSS–разметка (styles.css):

JS–скрипты (scripts.js):

Результат: