take data from a given line

Question

I have a table. In each row there is a button. At the time the user clicks, I need to get all the data of this line. It is a common table, where data is inserted dynamically, along with the button.

This button has an onclick event that calls a function. I have tried the following commands (unsuccessfully)

function test() { // tblInfracoes
    console.log($(this).closest('tr'))
}

returning

w.fn.init [prevObject: w.fn.init(1)]
length: 0
prevObject: w.fn.init [Window]
__proto__: Object(0)

---

function test() {
     var tableData = $(this).children("td").map(function() {
        return $(this).text();
    }).get();

    console.log(tableData);
}

which returns an empty vector

---

HTML:

<table class="table table-striped"  id="tbl-test">
    <thead>
        <tr>
            <th scope="col">nome</th>
            <th scope="col">idade</th>
            <th scope="col">Período de atividade</th>
            <th scope="col">Período de exclusão</th>
            <th scope="col">Opções</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

---

Function populating table: (I want you to copy the data when you click Edit)

function insertRow(nome, idade, periodoValido, periodoInvalido) {
   var html = `
        <tr>
            <td>${nome}</td>
            <td>${idade}</td>
            <td>${periodoValido}</td>
            <td>${periodoInvalido}</td>
            <td>
                <span onclick="test()">
                      <i class="fas fa-edit"></i>
                </span>
            </td>
         </tr>
   `;

    $("#tblInfracoes").append(html)
}

Answer 1

You can do this by deleting the last column where you have the button. You need to pass the this button to be able to find the row and its columns:

function test(botao) {
   
   var tableData = $(botao).closest("tr").find("td:not(:last-child)").map(function(){
      return $(this).text().trim();
   }).get();

   console.log(tableData);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td>
         A1
      </td>
      <td>
         B1
      </td>
      <td>
         C1
      </td>
      <td>
         <button onClick="test(this)">pegar linha</button>
      </td>
   </tr>
   <tr>
      <td>
         A2
      </td>
      <td>
         B2
      </td>
      <td>
         C2
      </td>
      <td>
         <button onClick="test(this)">pegar linha</button>
      </td>
   </tr>
</table>

Explanation:

$(botao) // seleciona o botão clicado
.closest("tr") // busca a linha onde está o botão clicado
.find("td:not(:last-child)") // busca na linha as colunas, menos a última