我想在表的每一行中添加一個jQuery對話框，使用jQuery和dataTables插件。我想添加特定於每行的對話框數據。我在其他帖子中看到，您可以想到兩種方法： 1）每行有一個對話框。 2）只有一個對話框的所有行，然後用特定的數據填充它。如何爲html表中的每一行添加一個jquery對話框？

在這個例子中，我有一個表中的名稱（nombre），代碼（codigo）和模式（modo）的課程列表。對於每一行，都有一個按鈕（modificar），應該顯示一個對話框來編輯該課程的數據。當然，在每個對話框中，必須加載該行的數據。

我的想法（在其他文章中查看其他想法）是將對話框放入行中，以便可以從該行加載數據。

我創建了一個類（masInfo），並在Javascript代碼中放置了一個函數，該函數應該在按鈕之後打開對話框。但它不起作用。

你有什麼想法嗎？謝謝。

HTMLŸJSP

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <link type="text/css" 
       href="css/milk.css" rel="stylesheet" /> 
    <title>Paginadores tablas</title> 
    </head> 
    <body> 
     <% 
      CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos(); 
      ArrayList<Curso> cursos = catalogoCursos.getCursos(); 
     %> 
     <div id="miTabla"> 
      <form id="formulario" name="formulario" method="post"> 
       <table id="tabla"> 
        <thead> 
         <tr> 
          <th>Nombre </th> 
          <th>Código </th> 
          <th>Modo de juego </th> 
          <th> Acción </th> 
         </tr> 
        </thead> 
        <tbody> 
        <% 
         for(Curso curso: cursos) { 
        %> 
         <tr> 
          <td><%=curso.getNombre()%></td> 
          <td><%=curso.getCodigo()%></td> 
          <td><%=curso.getStringModo()%></td> 
          <td> 
           <input type="button" class="masInfo" value="modificar"/> 
           <div title="Modificar curso"> 
            <table> 
             <tr> 
              <td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td> 
              <td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td> 
              <td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td> 
             </tr> 
            </table> 
           </div> 
          </td> 
          </td> 
         </tr> 
        <% 
         } 
        %> 
        </tbody> 
       </table> 
      </form> 
     </div> 

    </body> 
    </html>

JAVASCRIPT

<script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery-ui.custom.js"></script> 
    <script type="text/javascript" src="js/jquery.dataTables.js"></script> 
    <script type="text/javascript"> 
    (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; 
     }); 
    });

來源

2012-09-22 Víctor Pariente

你是多少隻使用一個對話框富裕和填充按鈕單擊該對話框中的相關信息。您目前的做法會導致大量重複的輸入元素。

因此，HTML看起來像：

<div id="miTabla"> 
    <table id="tabla"> 
     <thead> 
      <tr> 
       <th>Nombre </th> 
       <th>Código </th> 
       <th>Modo de juego </th> 
       <th> Acción </th> 
      </tr> 
     </thead> 
     <tbody> 
     <% 
      for(Curso curso: cursos) { 
     %> 
      <tr> 
       <td><%=curso.getNombre()%></td> 
       <td><%=curso.getCodigo()%></td> 
       <td><%=curso.getStringModo()%></td> 
       <td> 
        <input type="button" class="masInfo" value="modificar"/> 
       </td> 
       </td> 
      </tr> 
     <% 
      } 
     %> 
     </tbody> 
    </table> 
</div> 
<div title="Modificar curso" id="ModificarDialog"> 
    <form id="formulario" name="formulario" method="post"> 
     <table> 
      <tr> 
       <td><input type="text" name="mod_nombre" id="mod_nombre" /></td> 
       <td><input type="text" name="mod_codigo" id="mod_codigo" /></td> 
       <td><input type="text" name="mod_modo" id="mod_modo" /></td> 
      </tr> 
     </table> 
    </form> 
</div>

的JavaScript將改變爲：

(function($) { 
    // Dialog 
    $('#ModificarDialog').dialog({ 
     autoOpen: false, 
     width: 600, 
     buttons: { 
      "Borrar": function() { 
       document.formulario.submit(); 
       $(this).dialog("close"); 
      }, 
      "Cancelar": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    // Dialog Link 
    $('.masInfo').click(function(){ 
     var cells = $(this).parent().find('td'); 
     $('#mod_monbre').val(cells.eq(0).text()); 
     $('#mod_codigo').val(cells.eq(1).text()); 
     $('#mod_modo').val(cells.eq(2).text()); 
     $('#dialog').dialog('open'); 
     return false; 
    }); 
});

來源

2012-09-23 11:38:06

謝謝你，良好的反應！是的，最好只用一個對話框，另一種方式是重複太多變量。 –

如何爲html表中的每一行添加一個jquery對話框？

HTMLŸJSP

JAVASCRIPT

回答

相關問題