Get values from a table and convert it into an array

Navigation
0

I have a table like the following, in which data is inserted, what I want to achieve is that when pressing the button an array is formed which contains four fixes each of them with the value of each one of the inputs.

The arrangement that I need to form would be as follows: 

prametros = [
             0:[dato1: "xvalor", dato2: "xvalor",dato3: "xvalor",dato4: "xvalor", dato5: "xvalor"],
             1:[dato1: "xvalor", dato2: "xvalor",dato3: "xvalor",dato4: "xvalor", dato5: "xvalor"],
             2:[dato1: "xvalor", dato2: "xvalor",dato3: "xvalor",dato4: "xvalor", dato5: "xvalor"],
             3:[dato1: "xvalor", dato2: "xvalor",dato3: "xvalor",dato4: "xvalor", dato5: "xvalor"],
            ]

I have the following code worse does not do what I need someone who can help me I would appreciate it very much. 

$("#btn-nuevo").click(function(){
            var parametros=[];
            var parame=[];
            $("table tbody tr").each(function(i,e){
                parametro = {    
                  "dato1" : $(this).val(),
                  "dato2" : $(this).val(),
                  "dato3" : $(this).val(),
                  "dato4" : $(this).val(),
                  "dato5" : $(this).val()
                }      
                
            });
            parametros.push(parametro);
            alert(parametros);
            console.log(parametros);

        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="table" border "1">
						<thead>
							<tr>
								<td>Opciones</td>
								<td>Dato 1</td>
								<td>Dato 2</td>
								<td>Dato 3</td>
								<td>Dato 4</td>
								<td>Dato 5</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Opcion 1</td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="text" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido" ></td>
							</tr>
							<tr>
								<td>Opcion 2</td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="text" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
							</tr>
							<tr>
								<td>Opcio 3</td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="text" class="form-control requerido" ></td>
								<td><input type="number" class="form-control requerido" ></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
							</tr>
							<tr>
								<td>Opcion 4</td>
								<td><input type="number" class="form-control requerido" ></td>
								<td><input type="text" class="form-control requerido" ></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
							</tr>
						</tbody>
					</table>
        <button id="btn-nuevo" type="button" class="btn btn-primary" style="margin-bottom:10px">
                 <i class="glyphicon glyphicon-plus"></i>
                 Agregar
             </button>
    
asked by Soldier 18.10.2017 в 20:01
source

1 answer

2

You're close. Just go through the td of each tr and add the td to an array of tr . You also have to ignore the first index of each tr which are the ones that say Option 1, Option 2, etc., etc.

Here the code: 

$("#btn-nuevo").click(function(){
            var parametros=[];
            var parame=[];
            $("table tbody tr").each(function(i,e){
            
                var tr = [];
                $(this).find("td").each(function(index, element){
                    if(index != 0) // ignoramos el primer indice que dice Option #
                    {
                    var td = {};
                    td["dato"+index] = $(this).find("input").val();
                    tr.push(td);
                    }
                });
                parametros.push(tr);    
            });
            
            console.log(parametros);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="table" border "1">
						<thead>
							<tr>
								<td>Opciones</td>
								<td>Dato 1</td>
								<td>Dato 2</td>
								<td>Dato 3</td>
								<td>Dato 4</td>
								<td>Dato 5</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Opcion 1</td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="text" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido" ></td>
							</tr>
							<tr>
								<td>Opcion 2</td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="text" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
							</tr>
							<tr>
								<td>Opcio 3</td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="text" class="form-control requerido" ></td>
								<td><input type="number" class="form-control requerido" ></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
							</tr>
							<tr>
								<td>Opcion 4</td>
								<td><input type="number" class="form-control requerido" ></td>
								<td><input type="text" class="form-control requerido" ></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
								<td><input type="number" class="form-control requerido"></td>
							</tr>
						</tbody>
					</table>
        <button id="btn-nuevo" type="button" class="btn btn-primary" style="margin-bottom:10px">
                 <i class="glyphicon glyphicon-plus"></i>
                 Agregar
             </button>
    
answered by 18.10.2017 / 20:15
source
Check fields and stop sending form Fit text inside a button