Walk through the bootstrap table with jQuery text and value HTML5

Question

Walk through the bootstrap table with jQuery text and value HTML5

Navigation

#1 by (4 votes)

3

I have a problem with jQuery .
I'm going through a table of bootstrap with certain values, I need the values to be saved in an array, at this moment I'm going through the values separately, I do not know how I can go through all the values and save them in array .

I would like it to be as follows:

valores = [modelo, codigo, precio, piezasporcaja, cantidaddepiezas]

This is what I have so far:

 $("#ok").click(function() {
   info = ""
   $(".valores").parent("tr").find("td").each(function() {
     info += $(this).text() + ",";
     // info += this.value+ " ";
   });

   $('.valores').each(function(e) {
     info += this.value + " ";
   });
   console.log(info);
   alert(info);
 })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">Modelo</th>
      <th scope="col">Codigo</th>
      <th scope="col">Precio</th>
      <th scope="col">Piezas por caja</th>
      <th scope="col">Cantidad de Piezas</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class='valores' scope="row">SILENT 100 DESIGN</th>
      <td>5DESIGN100</td>
      <td>$ 62.00 USD</td>
      <td>4</td>
      <td> <input type='number' class='form-control valores' name='qtyMulti' value='0' required min='0' max='99999'> </td>
    </tr>
    <tr>
      <th class='valores' scope="row">SILENT 200 DESIGN</th>
      <td>5DESIGN200</td>
      <td>$ 85.00 USD</td>
      <td>4</td>
      <td> <input type='number' class='form-control valores' name='qtyMulti' value='0' required min='0' max='99999'> </td>
    </tr>  
  </tbody>
</table>

<input type="button" value="ok" id="ok" class="boton2">

jquery html5 array ajax bootstrap-4

asked by Manueel Perezz 03.05.2018 в 20:45

source

1 answer

Pass a std :: vector by reference (Avoid Copy) C # - Auxiliary copy of an arraylist

score 4 · Accepted Answer

You can do it by giving the class valores to the lines instead of the th asi:

$("#ok").click(function() {
  var info=[];
  $(".table").find("tr.valores").each(function() {
               var row = [];
               var flag = false;
               $(this).children().each(function() {
                   var input = $(this).find('input');
                   if (input[0]) {
                     if (input.val() > 0) {
                       flag = true;
                       row.push(input.val());
                     }
                   } else {
            	     row.push($(this).text() );
                   }
       	       });             
               if (flag) {
                 info.push(row);
               }
  });
  console.log(info);
  alert(info);
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">Modelo</th>
      <th scope="col">Codigo</th>
      <th scope="col">Precio</th>
      <th scope="col">Piezas por caja</th>
      <th scope="col">Cantidad de Piezas</th>
    </tr>
  </thead>
  <tbody>
    <tr class='valores'>
      <th scope="row">SILENT 100 DESIGN</th>
      <td>5DESIGN100</td>
      <td>$ 62.00 USD</td>
      <td>4</td>
      <td> <input type='number' class='form-control valores' name='qtyMulti' value='0' required min='0' max='99999'> </td>
    </tr>
    <tr class='valores'>
      <th scope="row">SILENT 200 DESIGN</th>
      <td>5DESIGN200</td>
      <td>$ 85.00 USD</td>
      <td>4</td>
      <td> <input type='number' class='form-control valores' name='qtyMulti' value='0' required min='0' max='99999'> </td>
    </tr>  
  </tbody>
</table>

<input type="button" value="ok" id="ok" class="boton2">