title: How to add a jquery dialog for each row in a html table?
body: <p>I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin.
  I want to add in the dialog data specific to each row.
  I've seen in other post that you can think of two ways:
     1) One dialog for each row.
     2) Only one dialog for all the rows, and then fill it with specific data.</p>
  
  <p>In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo). 
  For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.</p>
  
  <p>My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.</p>
  
  <p>I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.</p>
  
  <p>Do you have any idea? Thanks.</p>
  
  <h1>HTML Y JSP</h1>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;link type="text/css"
                  href="css/milk.css" rel="stylesheet" /&gt;
      &lt;title&gt;Paginadores tablas&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;%
              CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
              ArrayList&lt;Curso&gt; cursos = catalogoCursos.getCursos();
          %&gt;
          &lt;div id="miTabla"&gt;
              &lt;form id="formulario" name="formulario" method="post"&gt;
                  &lt;table id="tabla"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Nombre &lt;/th&gt;
                              &lt;th&gt;Código &lt;/th&gt;
                              &lt;th&gt;Modo de juego &lt;/th&gt;
                              &lt;th&gt; Acción &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;%
                          for(Curso curso: cursos) {
                      %&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;%=curso.getNombre()%&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;%=curso.getCodigo()%&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;%=curso.getStringModo()%&gt;&lt;/td&gt;
                              &lt;td&gt; 
                                  &lt;input type="button" class="masInfo" value="modificar"/&gt;
                                  &lt;div title="Modificar curso"&gt;
                                      &lt;table&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;input type="text" name="mod_nombre" value="&lt;%=curso.getNombre()%&gt;"/&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;input type="text" name="mod_codigo" value="&lt;%=curso.getCodigo()%&gt;"/&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;input type="text" name="mod_modo" value="&lt;%=curso.getStringModo()%&gt;"/&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/table&gt;
                                  &lt;/div&gt; 
                              &lt;/td&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;%
                          }
                      %&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <h1>JAVASCRIPT</h1>
  
  
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery-ui.custom.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      (function($) {
          // Dialog
          $('.masInfo').next().dialog({
              autoOpen: false,
              width: 600,
              buttons: {
                  "Borrar": function() {
                      document.formulario.submit();
                      $(this).dialog("close");
                  },
                  "Cancelar": function() {
                      $(this).dialog("close");
                  }
              }
          });
  
          // Dialog Link
          $('.masInfo').click(function(){
              $('#dialog').dialog('open');
              return false;
          });
      });
  </code></pre>