Taking value from an attribute inside an input from a table column

Asked

Viewed 345 times

0

I have a table and this table has a column that has an input like checkbox. In this input I created an attribute. How do I scroll through this column and retrieve the attribute value?

<html>
<head>
  <title>BVeículos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
 <thead class="f quinze quase-preto fundo-thead">
   <tr>
         <th class="larg-10">Marca</th>
		 <th class="larg-10">Modelo</th>
		 <th class="larg-10">Teste Driver?</th>
  </tr>
  </thead>
<tr>
<td>Fiat</td>
<td>Uno</td>
<td><input type="checkbox"  VeiculoId="1">Fazer teste</td>
</tr>
<tr>
<td>Ford</td>
<td>KA</td>
<td><input type="checkbox"  VeiculoId="2">Fazer teste</td>
</tr>
<tr>
<td>GM</td>
<td>Corsa</td>
<td><input type="checkbox"  VeiculoId="3">Fazer teste</td>
</tr>
</table>

<button>Agendar</button>
</body>
</html>

jquery html5

2 answers

2

How about with pure Javascript?

var checkbox = document.querySelectorAll("table tr td input");
for(let i = 0; i < checkbox.length; i++){
  console.log(checkbox[i].getAttribute('VeiculoId'));
}
<head>
    <title>BVeículos</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <table class="table table-bordered">
        <thead class="f quinze quase-preto fundo-thead">
            <tr>
                <th class="larg-10">Marca</th>
                <th class="larg-10">Modelo</th>
                <th class="larg-10">Teste Driver?</th>
            </tr>
        </thead>
        <tr>
            <td>Fiat</td>
            <td>Uno</td>
            <td>
                <input type="checkbox" VeiculoId="1">Fazer teste</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>KA</td>
            <td>
                <input type="checkbox" VeiculoId="2">Fazer teste</td>
        </tr>
        <tr>
            <td>GM</td>
            <td>Corsa</td>
            <td>
                <input type="checkbox" VeiculoId="3">Fazer teste</td>
        </tr>
    </table>

1


With jQuery you initially make a DOM selection in the columns, something like:

$("table.table tr td input[type=checkbox]").each(function(index, element){
    var atributo = $(this).attr("VeiculoId");
});

It is noteworthy that one of the most used patterns in HTML 5 is the use of attrbuto data-* which in your case would be data-VeiculoId. For this pattern there is a specific function of jQuery: a .data(). Then I’d be:

$("table.table tr td input[type=checkbox]").each(function(index, element){
    var atributo = $(this).data("VeiculoId");
});

Note that this selector to get to input is not very performative. I suggest you add a class to the table’s td, thus shortening the selection. Something like <td class="check">. That way your selector would look something like: $(".check input[type=checkbox]")

References: 1. https://api.jquery.com/data/ 2. https://api.jquery.com/each/ 3. http://api.jquery.com/attr/

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.