acudo por ayuda debido a que tengo problemas para obtener los valores de una tabla.ya que la tabla tiene elementos como input y select... Bueno lo que quiero hacer es que me obtenga todos los valores de dicha tabla, en cuanto a input ya me obtiene pero en cuanto a un select aun sigo teniendo problemas y de la misma forma que cada vez que hago un click en el botón "recorrer" no duplique los datos en otras filas como se puede ver en el script..
$(document).ready(function() {
$("#btn-new").on('click', function() {
var html = '<tr>' +
'<td class="numero"><input type="text" class="form-control txt" onkeyup=""></td>' +
'<td class="numero">' +
'<select name="md" class="form-control sele" id="">' +
'<option value="0">Seleccionar...</option>' +
'<option value="1">Kilos</option>' +
'<option value="2">Metros</option>' +
'</select>' +
'</td>' +
'<td class="numero">' +
'<select name="ds" class="form-control sele2" id="">' +
'<option value="0">Seleccionar...</option>' +
'<option value="1">Lorem ipsum dolor sit amet, consectetur.</option>' +
'<option value="2">Descripcion numero 02.</option>' +
'</select>' +
'</td>' +
'<td class="numero"><input type="text" class="form-control txt" onkeyup=""></td>' +
'<td class="numero"><input type="text" class="form-control txt" onkeyup=""></td>' +
'<td class="boton"><a type="button" class="btn btn-info">Eliminar</a></td>' +
'</tr>';
$("#tbody").append(html);
});
$("#btnRecorrer").on("click", function() {
var sele = $(".sele option:selected").text();
var sele2 = $(".sele2 option:selected").text();
alert(sele + '\n' + " * " + sele2 + '\n');
$("#tabla tbody tr").each(function(index) {
var campo1, campo2, campo3, campo4, campo5;
$(this).find("td input.txt").each(function(index2) {
switch (index2) {
case 0:
campo1 = $(this).val();
break;
case 1:
campo2 = $(this).val();
break;
case 2:
campo3 = $(this).val();
break;
case 3:
campo4 = $(this).val();
break;
case 4:
campo5 = $(this).val();
break;
}
});
var html = '<tr>' +
'<td>' + campo1 + '</td>' +
'<td>' + campo2 + '</td>' +
'<td>' + campo3 + '</td>' +
'<td>' + campo4 + '</td>' +
'<td>' + campo5 + '</td>' +
'</tr>';
$("#body").append(html);
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ventas C.I.</title>
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br><br><br>
<div class="container">
<button id="btn-new" class="btn btn-success">Agregar Nuevo</button>
<br><br>
<center>
<table class="table table-hover table-bordered" id="tabla">
<thead>
<tr>
<th>CANTIDAD</th>
<th>MEDIDA</th>
<th>DESCRIPCION</th>
<th>PRECIO</th>
<th>TOTAL</th>
<th>OPCION</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table><br><br>
<button id="btnRecorrer" class="btn btn-primary pull-left">Recorrer</button><br><br>
<table class="table table-hover table-bordered" border="1" id="tbl">
<thead>
<tr>
<th>Valor 1</th>
<th>Valor 2</th>
<th>Valor 3</th>
<th>Valor 4</th>
<th>Valor 5</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
</center>
</div>
</body>
</html>