- Primero recojo la variablelos valores y los guardo en un array.
- Despues la imprimo en el campo de la modal.
- Finalmente llamo a la modal.
function guardar() {
var txt=$("#texto1").val();
var valores = new Array();
var sList = "";
$('input[type=checkbox]').each(function () {
if(this.checked){
valores.push(
$(this).parent().parent().find(".costo").text()
);
}
});
$( "#texto2" ).text(txtvalores);
$( "#dialog" ).dialog();
};
table, td, tr{
border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div>
<input type="text"type="button" id="texto1"value="enviar" onclick="guardar()" />
<input
type="button" value="enviar"<table>
onclick="guardar()" <tr>
<th>ID</>th>
<th>Mes</th>
<th>Costo</th>
<th>Seleccione</th>
</tr>
<tr>
<td>1</td>
<td>Enero</td>
<td class="costo">20</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>Febrero</td>
<td class="costo">30</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>Marzo</td>
<td class="costo">40</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>Abril</td>
<td class="costo">50</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>Mayo</td>
<td class="costo">60</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>6</td>
<td>Junio</td>
<td class="costo">70</td>
<td><input type="checkbox"></td>
</tr>
</table>
</body>
</html>
</div>
<div id="dialog" title="Basic dialog">
<p id="texto2"></p>
</div>
</body>
</html>
- Primero recojo la variable.
- Despues la imprimo en el campo de la modal.
- Finalmente llamo a la modal.
function guardar() {
var txt=$("#texto1").val();
$( "#texto2" ).text(txt);
$( "#dialog" ).dialog();
};
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div>
<input type="text" id="texto1" />
<input type="button" value="enviar" onclick="guardar()" />
</div>
<div id="dialog" title="Basic dialog">
<p id="texto2"></p>
</div>
</body>
</html>
- Primero recojo los valores y los guardo en un array.
- Despues la imprimo en el campo de la modal.
- Finalmente llamo a la modal.
function guardar() {
var txt=$("#texto1").val();
var valores = new Array();
var sList = "";
$('input[type=checkbox]').each(function () {
if(this.checked){
valores.push(
$(this).parent().parent().find(".costo").text()
);
}
});
$( "#texto2" ).text(valores);
$( "#dialog" ).dialog();
};
table, td, tr{
border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div>
<input type="button" value="enviar" onclick="guardar()" />
<table>
<tr>
<th>ID</th>
<th>Mes</th>
<th>Costo</th>
<th>Seleccione</th>
</tr>
<tr>
<td>1</td>
<td>Enero</td>
<td class="costo">20</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>Febrero</td>
<td class="costo">30</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>Marzo</td>
<td class="costo">40</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>Abril</td>
<td class="costo">50</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>Mayo</td>
<td class="costo">60</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>6</td>
<td>Junio</td>
<td class="costo">70</td>
<td><input type="checkbox"></td>
</tr>
</table>
</body>
</html>
</div>
<div id="dialog" title="Basic dialog">
<p id="texto2"></p>
</div>
</body>
</html>