Estimados tengo una duda, quisiera saber como puedo agregar datos capturados de una tabla html con javascript u jsp. Mi idea es que cada vez que seleccione una fila de una tabla con un checkbox, se me agregue el valor de ese dato en un textbox o textarea, y se selecciono varios, todos se agreguen al textbox o textarea pero separados por comas ya que esos serian mis parametros para ejecutar una consulta sql.
Esta seria la tabla de donde capturo los datos
<div class="content container-fluid col-lg-10">
<div class="left panel-default">
<div class="title panel-heading">Seleccionar guías a mover</div>
<div class="panel-body panel panel-primary">
<table class="table table-hover table table-responsive col-sm-6" id="tabla1">
<tbody>
<tr id="a1">
<th class="bg bg-primary">Awb</th>
<th class="bg bg-primary">Origen</th>
<th class="bg bg-primary">Destino</th>
<th class="bg bg-primary">Piezas</th>
<th class="bg bg-primary">Kilos</th>
<th class="bg bg-primary">Volumen</th>
<th class="bg bg-primary">Id Vuelo</th>
<th class="bg bg-primary">Tramo</th>
<th class="bg bg-primary">Mover</th>
</tr>
<%
try
{
for(int i=0; i<guia.size(); i++)
{
out.println("<tr id='a2'>");
out.println("<td class='cantidad'><input type='text' name='txt_guia' class='cantidad' value='"+guia.get(i).getNumeroGuia()+"'></td>");
out.println("<td class='check'>"+guia.get(i).getOrigenGuia()+"</td>");
out.println("<td class='check'>"+guia.get(i).getDestinoGuia()+"</td>");
//out.println("<td>"+guia.get(i).getOrigenVueloReserva()+"</td>");
out.println("<td class='check'>"+guia.get(i).getPiezasGuia()+"</td>");
out.println("<td class='check'>"+guia.get(i).getKilosGuia()+"</td>");
out.println("<td class='check'>"+guia.get(i).getVolumenGuia()+"</td>");
out.println("<td class='check'>"+guia.get(i).getIdVueloGuia()+"</td>");
out.println("<td class='check'>"+guia.get(i).getIdTramoGuia()+"</td>");
out.println("<td><input type='checkbox' name='check_guia' class='form-control checkbox' value='"+guia.get(i).getNumeroGuia()+"'></td>");
}
}
catch(java.lang.NullPointerException ex)
{
out.println("<p>'"+ex.getMessage()+"'</p>");
out.println("</tr>");
}
%>
</tbody>
</table>
</div>
</div>
</div>
aca la tabla que recibe las columnas seleccionadas y abajo de la tabla está el textbox que deberia mostrar los datos
<div class="content container-fluid col-lg-10">
<div class="right panel-default">
<div class="title panel-heading">Guías Asignadas</div>
<div class="panel-body panel panel-primary">
<table class="table table-hover table table-responsive col-sm-6" id="tabla2">
<tbody>
<tr>
<th class="bg bg-primary">Awb</th>
<th class="bg bg-primary">Origen</th>
<th class="bg bg-primary">Destino</th>
<th class="bg bg-primary">Piezas</th>
<th class="bg bg-primary">Kilos</th>
<th class="bg bg-primary">Volumen</th>
<th class="bg bg-primary">Id Vuelo</th>
<th class="bg bg-primary">Tramo</th>
<th class="bg bg-primary">Acción</th>
</tr>
</tbody>
</table>
<input type="text" id="txt_mostrar" class="form-control">
<br><br><br><br>
</div>
</div>
</div>
aca el codigo de javascript que se encarga de capturar el dato seleccionado de la columna llamada "awb" de la tabla.
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function() {
if($(this).is(":checked"))
{
// el checkbox esta marcado
// movemos la columna a la tabla2
var tr=$(this).parents("tr").appendTo("#tabla2 tbody");
console.log($(this).parents('tr').find('td.cantidad').html());
var dato = $(this).parents('tr').find('input:text[name="txt_guia"]').val();
$('#txt_mostrar').val(dato);
}else{
// el checkbox esta desmarcado
// movemos la columna a la tabla1
var tr=$(this).parents("tr").appendTo("#tabla1 tbody");
}
});
});
</script>
el problema es que al seleccionar el dato me lo captura, pero si selecciono otro, entonces me reemplaza el anterior en el campo de texto y lo que necesito es que cada valor capturado se muestre uno al lado del otro separado por coma.