Get data from a table using JQuery or Javascript

Question

Get data from a table using JQuery or Javascript

Navigation

#1 by (2 votes)

0

I am developing a system in which I need to obtain a data (ID) of a row whose column is with the attribute hidden .

Table code

<table id="tbl_Datos">
    <thead>
        <tr>
            <th hidden>ID</th>
            <th>Nombre</th>
            <th>Seleccionar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td hidden="">1</td>
            <td>Juan</td>
            <td><input type="checkbox" name="datos"></td>
        </tr>
        <tr>
            <td hidden="">2</td>
            <td>Paco</td>
            <td><input type="checkbox" name="datos"></td>
        </tr>
        <tr>
            <td hidden="">3</td>
            <td>Pedro</td>
            <td><input type="checkbox" name="datos"></td>
        </tr>
    </tbody>
</table>

What I want is just to obtain a data by selecting the checkbox and deselecting if I had previously marked another checkbox. (I want to get the id).

javascript jquery html5

asked by Ferny Cortez 08.01.2018 в 20:17

source

1 answer

Perform direct consultation Carry out two consultations in the same method in Laravel

score 2 · Accepted Answer

You can upload your data by going through the body of your table, regardless of the properties you have assigned.

$(document).ready(function() {
    $('input[type=radio]').change(function() {
        $("#tbl_Datos").find("tr").each(function (idx, row) {
          if (idx > 0) {
              var cbkbox = $("td:eq(2) input:checked", row).val();
              if(cbkbox) {
                  var JsonData = {};
                  JsonData.Id = $("td:eq(0)", row).text();
                  JsonData.Nombre = $("td:eq(1)", row).text();
                  JsonData.Seleccionar = cbkbox;
                  alert("Selecionaste a id: " + JsonData.Id + " Nombre:"  + JsonData.Nombre);
              }
          }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_Datos">
    <thead>
        <tr>
            <th hidden></th>
            <th>Nombre</th>
            <th>Seleccionar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td hidden="">1</td>
            <td>Juan</td>
            <td><input type="radio" name="datos"></td>
        </tr>
        <tr>
            <td hidden="">2</td>
            <td>Paco</td>
            <td><input type="radio" name="datos"></td>
        </tr>
        <tr>
            <td hidden="">3</td>
            <td>Pedro</td>
            <td><input type="radio" name="datos"></td>
        </tr>
    </tbody>
</table>

Running one each in the table will allow you to select each cell, you can even become very specific to the elements you want to read, as with your checkbox for example.
Touring a table with jQuery [.each]