Hola, tengo un boton que al pulsarlo aparece una ventana modal jquery. En ella tengo dos combos (numero de filas y tipo de fila) y quiero recoger los datos seleccionados para que al pulsar aceptar en la ventana jquery se cierre dicha ventana y me muestre la tabla con el numero de filas correspondientes.
Aquí os dejo el código y espero que podais ayudarme. Muchas gracias!
panel.php
Código:
</section>
<br>
<section class="s2">
<input type="button" onclick="add()" value="Añadir tabla" id="addButton" name="addButton" />
<div id="tabla"></div>
<div id="ventana" title="Añadir tabla" style="display:none">
<table id="nuevaTabla">
<tr>
<td>Número de filas</td>
<td>Tipo de fila</td>
</tr>
<tr>
<td>
<select id="numFilas" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select id="tipo" >
<option value="1">Radio Buttons</option>
<option value="2">Checkbox</option>
<option value="3">Textarea</option>
</select>
</td>
</tr>
</table>
</div>
</section>
funciones.js
Código:
function add(){
$("#ventana").dialog({
width: 500,
height:240,
buttons: {
Aceptar: function() {
numFilas = $("#numFilas").val();
$.ajax({
type:'get',
url: 'includes/tabla.inc.php',
datatype: 'html',
success: function(data){
$("#tabla").html(data);
}
});
},
Cancelar: function() {
$(this).dialog("close");
}
}
});
}
tabla.inc.php
Código:
<?php
require_once("../class/conexiondb.php");
$nFilas = $_POST['numFilas'];
echo "Número de filas:" .$nFilas;
?>
<table id="t1">
<tr id="botonera">
<td></td>
<td class="td1"><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" > </input><input class="btEliminar" onclick="eliminar(this)" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td><input class="btAnadir" onclick="addColumna()" type="button" name="boton" value="+" ></input> <input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
</tr>
<?php
$link = new conexiondb();
$sql = "select * from opciones";
$res=$link->consulta($sql);
$columnas = mysql_num_rows($res); // número de columnas de la tabla
$compara=1; // inicializa variable de comparación
while($row = mysql_fetch_array($res)){ // formamos las filas y celdas y agregamos los datos a la tabla
$celdacontenido="<td><div id=".$row['posicion']." contenteditable>".$texto = $row['texto']."</div></td>";
// celdacontenido es la celda en si mismo junto a los datos
if ($compara==1){
echo "<tr id='cabecera'>";
echo '<td><input class="btAnadir" onclick="add()" type="button" name="boton" value="+" ></input></td>'.$celdacontenido;
}
if ($compara<>1){
if ($compara<>$columnas){
echo $celdacontenido;
}
}
if ($compara==$columnas){
echo $celdacontenido."</tr>";
$compara = 1;
}else {
$compara = $compara +1;
}
}
/*
for($i = 1; $i <= $nFilas; $i++){
echo '<tr class="par">
<td><input class="btAnadir" onclick="anadir()" type="button" name="boton" value="+" ></input><input class="btEliminar" onclick="eliminar()" type="button" name="boton" value="-" ></input></td>
<td class="td1"><div contenteditable></div></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
<td><input type="radio" id="p'.$i.'" name="p'.$i.'" /></td>
</tr>';
}*/
?>
<tfoot>
<tr>
<td class="footer" colspan="7" >
<input type="button" value="Copiar tabla" class="copiarTabla"></input>
<input type="button" value="Eliminar tabla" class="eliminarTabla"></input>
<input type="button" value="Guardar" class="guardar"></input>
</td>
</tr>
</tfoot>
</table>