Как обратиться к конкретному TD в первом ряду TBODY и изменить класс той же строки, используя Jquery?

Question

У меня есть такая HTML-таблица

HTML

  <table id="myTable">
    <thead>
    <tr class="item">
    <td>ID</td>
    <td>Name</td>
    <td>Phone</td>
    <td>Action</td>
    </thead>
    <tbody>
    <tr class="item">
    <td>1</td>
    <td>John Collins</td>
    <td>9089898989</td>
    <td><button>Save</button></td>

    </tr>
    <tr class="item">
    <td>1</td>
    <td>Janine Godwin</td>
    <td>Janine Godwin</td>
    <td>43433434</td>
    <td><button>Save</button></td>
    </tr>
    </tbody>

    </table>

Я хотел бы удалить последний TD (кнопку) в первой строке внутри тега tbody и изменить егокласс строки от 'item' до 'sample'.Как я могу сделать это с Jquery?

Answer 1

1. Получить таблицу:
   $('#myTable')
2. Получить <tbody>:
   $('#myTable > tbody')
3. Получить первую строку в <tbody>:
   $('#myTable > tbody > tr:first')
4. Изменить класс этой строки с 'item' на 'sample':
   $('#myTable > tbody > tr:first').removeClass('item').addClass('sample')
5. Получить последние <td> в первом ряду в <tbody>:
   $('#myTable > tbody > tr:first > td:last')
6. Удалить это последнее <td>:
   $('#myTable > tbody > tr:first > td:last').remove()

Соберите все вместе:

$('#myTable > tbody > tr:first')
    .removeClass('item')
    .addClass('sample')
    .children('td:last')
    .remove();

Answer 2

Я думаю, что это то, что вы просите, но я рекомендую вам прочитать документацию Jquery.

$('tbody tr.item:first')
    .attr('class', 'sample')
    .find('td button').text('change me')

Первая часть получает нужную вам строку, вторая часть меняет класс, а третья находит кнопку и изменяет ее (хотя вы не упомянули, как вы хотите ее изменить).