Предположим, у меня есть таблица HTML, и в каждой строке есть некоторые данные, кнопка «Обновить» и «Удалить». Я хочу, нажав на кнопку «Обновить», получить все данные, которые есть в этой конкретной строке. Я искал другие примеры, но большинство из них просто просматривали столбец с помощью идентификатора столбца и просто печатали все найденные ячейки. После нажатия кнопки обновления мне нужно получить все текущие данные ячейки, которые есть в этой строке. Как я могу это сделать?

Дж.С. Фиддл ЗДЕСЬ

Could not properly indent code after trying for more than 30mins so I gave up
2
ceid-vg 30 Авг 2017 в 00:00

3 ответа

Лучший ответ

Вы можете изменить свою кнопку HTML с:

<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>

Чтобы :

<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                                                                      ^^^^

Добавление ключевого слова this к функции, которую вы передаете текущей кнопке. Теперь, чтобы получить соответствующую строку, достаточно использовать jQuery.closest ():

var row = $(ele).closest('tr');

Или с простым js .closest ()

var row = ele.closest('tr');

Для кнопок обновления вы можете добавить обработчик кликов:

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {

Или с простым js

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach.....

Фрагмент jQuery:

window.getConfirmation = function(ele){
    var retVal = confirm("Are you sure you want to delete ?");
    if( retVal == true ){
        alert("User wants to delete!");
        var row = $(ele).closest('tr');
        row.remove();
        return true;
    }
    else{
        alert ("User does not want to delete!");
        return false;
    }
}

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var row = $(this).closest('tr');
    console.log('TR first cell: ' + row.find('td:first').text());
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <h2>Employees</h2>
    <table id="employees-table" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Born</th>
            <th>Country</th>
            <th>Department</th>
            <th class="text-center">Update Row</th>
            <th class="text-center">Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John</td>
            <td>vas@gmail.com</td>
            <td>1976</td>
            <td>USA</td>
            <td>Michigan</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mark</td>
            <td>Twain</td>
            <td>va1122s@gmail.com</td>
            <td>1965</td>
            <td>England</td>
            <td>London</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        </tbody>
    </table>
</div>

Согласно комментарию Хоссейна Асанда (Как я могу сделать это, используя только Javascript?), Следует полное решение js:

window.getConfirmation = function(ele){
    var retVal = confirm("Are you sure you want to delete ?");
    if( retVal == true ){
        var row = ele.closest('tr');
        console.log("User wants to delete: " + row.cells[0].textContent);
        row.remove();
        return true;
    }
    else{
        console.log("User does not want to delete!");
        return false;
    }
}

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        var row = this.closest('tr');
        console.log('TR first cell: ' + row.cells[0].textContent);
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<div class="container">
    <h2>Employees</h2>
    <table id="employees-table" class="table table-hover table-responsive">
        <thead>
        <tr>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Born</th>
            <th>Country</th>
            <th>Department</th>
            <th class="text-center">Update Row</th>
            <th class="text-center">Delete Row</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John</td>
            <td>vas@gmail.com</td>
            <td>1976</td>
            <td>USA</td>
            <td>Michigan</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mark</td>
            <td>Twain</td>
            <td>va1122s@gmail.com</td>
            <td>1965</td>
            <td>England</td>
            <td>London</td>
            <td class="text-center">
                <button type="button" class="btn btn-warning">Update</button>
            </td>
            <td class="text-center">
                <g:link controller="employee" action="deleteRecord">
                    <button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                </g:link>
            </td>
        </tr>
        </tbody>
    </table>
</div>
5
gaetanoM 11 Май 2019 в 20:38

Ответ от @gaetanoM будет принятым. Если кому-то нужен способ не только получить только идентификатор, но и полные данные строки, вы можете попробовать это:

HTML-код .

Измените это:

<td>1</td>
<td>John</td>
<td>John</td>
<td>vas@gmail.com</td>
<td>1976</td>
<td>USA</td>
<td>Michigan</td>

на это:

<td class="table_id">23</td>
<td class="table_firstName">John</td>
<td class="table_lastName">John</td>
<td class="table_email">vas@gmail.com</td>
<td class="table_born">1976</td>
<td class="table_country">USA</td>
<td class="table_departmentId">Michigan</td>

КОД JAVASCRIPT:

Измените это:

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var row = $(this).closest('tr');
    console.log('TR first cell: ' + row.find('td:first').text());
})

на это:

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {
    var id = $(this).closest('tr').find('.table_id').text();
    console.log("Id = " + id);
    var firstname = $(this).closest('tr').find('.table_firstName').text();
    console.log("First Name = " + firstname);
    var lastname = $(this).closest('tr').find('.table_lastName').text();
    console.log("Last Name = " + lastname);
    var email = $(this).closest('tr').find('.table_email').text();
    console.log("Email = " + email);
    var born = $(this).closest('tr').find('.table_born').text();
    console.log("Born = " + born);
    var country = $(this).closest('tr').find('.table_country').text();
    console.log("Country = " + country);
    var department = $(this).closest('tr').find('.table_departmentId').text();
    console.log("Department = " + department);
})

Смотрите результаты в ЭТОМ фиддле.

Еще раз спасибо всем, кто помог найти ответ !!!

0
ceid-vg 29 Авг 2017 в 21:58

Чтобы получить данные в строке после нажатия кнопки Обновить

<button type="button" class="btn btn-warning" onclick="getData(this)">

window.getData = function(val) {
  let arr= [];

  val.parentNode.parentNode.querySelectorAll('td').forEach(item=>{
    if (item.getAttribute('class') != "text-center") {
      arr.push(item.innerHTML)
    }
  },this)
  console.log(arr); //["1", "John", "John", "vas@gmail.com", "1976", "USA", "Michigan"]
}
1
AkeRyuu 29 Авг 2017 в 21:21