HTML Y JSP

Question

我正在尝试使用jQuery和dataTables插件在表的每一行中添加一个jQuery对话框。我想添加特定于每一行的对话框数据。我在其他帖子中看到你可以想到两种方式： 1）每行一个对话框。 2）只有一个对话框用于所有行，然后用特定数据填充它。

在这个例子中，我有一个表格中的课程列表，名称（nombre），代码（codigo）和模式（modo）。对于每一行，都有一个按钮（modificar），它应该显示一个对话框来编辑该课程的数据。当然，在每个对话框中，必须加载该行的数据。

我的想法（在其他帖子中查看了其他想法）是将对话框放在行中，因此我可以从该行加载数据。

我创建了一个类（masInfo），在Javascript代码中，我放了一个应该在按钮后打开对话框的函数。但它不起作用。

你知道吗？感谢。

HTML Y 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;
        });
    });

Answer 1

最好只使用一个对话框，并在按钮单击的对话框中填充相关信息。您当前的方式将导致大量重复的输入元素。

因此，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;
    });
});

如何为html表中的每一行添加一个jquery对话框？

HTML Y JSP

JAVASCRIPT

1 个答案: