Skip to main content
array
Origen Enlace
GDP
  • 2.8k
  • 5
  • 23
  • 40
  1. Primero recojo la variablelos valores y los guardo en un array.
  2. Despues la imprimo en el campo de la modal.
  3. 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>
  1. Primero recojo la variable.
  2. Despues la imprimo en el campo de la modal.
  3. 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>
  1. Primero recojo los valores y los guardo en un array.
  2. Despues la imprimo en el campo de la modal.
  3. 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>
Origen Enlace
GDP
  • 2.8k
  • 5
  • 23
  • 40

  1. Primero recojo la variable.
  2. Despues la imprimo en el campo de la modal.
  3. 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>