Get value from an attribute within an input of a table column

Question

Get value from an attribute within an input of a table column

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

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

<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><scriptsrc="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

asked by anonymous 13.06.2018 / 13:50

2 answers

2

What about 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><scriptsrc="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>

13.06.2018 / 14:21

(PHP) What variable I put inside mysqli_affected_rows How to remove a textarea element

score 1 · Accepted Answer

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

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

It is worth mentioning that one of the most commonly used HTML5 standards is the use of data-* attrbuto, which in your case would be data-VeiculoId . For this pattern there is a specific jQuery function: a .data() . In this case it would be:

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

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

References: 1. link 2. link 3. link