将值从表传递到模式对话框

Question

我正在尝试将值从表传递到模式窗口，但没有得到

我尝试了jQuery的某些功能，但我不知道自己可能做错了什么。 我将发布代码，该代码可以正常工作，但是我没有在尝试中进行任何更改。

当您单击更改时，我想获取值并移至对话框。

<c:if test="${fn:length(lista) > 0 }">
    <table class="table table-hover">
        <tr>

            <th >Código</th>
            <th>Nome</th>
            <th>Descrição</th>
            <th>Medida</th>
            <th>Fornecedor</th>
            <th>Quantidade Mínima</th>
            <th>Quantidade Máxima</th>
            <th>Estoque</th>
            <th>Categoria</th>
            <th>Preço</th>
            <th></th>
        </tr>
        <c:forEach items="${lista }" var="mat">
            <tr>

                <td>${mat.codigo }</td>
                <td>${mat.nome }</td>
                <td>${mat.descricao }</td>
                <td>${mat.medida }</td>
                <td>${mat.fornecedor }</td>
                <td>${mat.qtd_Min }</td>
                <td>${mat.qtd_Max }</td>
                <td>${mat.estoque }</td>
                <td>${mat.categoria.categoria }</td>
                <td>${mat.preco }</td>

                <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info" data-toggle="modal">Alterar</a> 
                    <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
                </td>
            </tr>
        </c:forEach>
    </table>

</c:if>

面板变更

<div id="DialogAlterarMaterial" class="modal fade"
    aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
    tabindex="-1" style="display: none;">

    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">

            <div class="modal-header">
                <button class="close" aria-hidden="true" data-dismiss="modal"
                    type="button">×</button>
                <h4 class="modal-title">Cadastro de Materiais</h4>
            </div>
            <div class="modal-body" style="min-height: 500px;">

                <form action="alterar.html" method="post">
                    <div class="form-group" style="width: 80px; float: left;margin-top: 0%">
                        <label for="codigo">Código</label> <input name="codigo"
                            class="form-control" type="text" value="${mat.codigo }">
                    </div>
                    <div class="form-group"
                        style="width: 300px; float: left; margin-top: 9%; margin-left: -10.5%">
                        <label for="nome">Nome</label> <input name="nome"
                            class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 430px; float: left; margin-left: 2%; margin-top: 9%;">
                        <label for="descricao">Descrição</label> <input
                            name="descricao" class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 130px; float: left; margin-left: 0%; margin-top: 0%">
                        <label for="unimed">Unidade de Medida</label> <input
                            name="unimed" class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 155px; float: left; margin-left: 2%;margin-top: 0%">
                        <label for="preco">Preço</label> <input name="preco"
                            class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 430px; float: left; margin-left: 2%;margin-top: 0%">
                        <label for="fornecedor">Fornecedor</label> <input
                            name="fornecedor" class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 85px; float: left; margin-left: 0%;">
                        <label for="qtdMin">Qtd. Mínima</label> <input
                            name="qtd_Min" class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 85px; float: left; margin-left: 2%;">
                        <label for="qtdMax">Qtd. Máxima</label> <input
                            name="qtd_Max" class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 85px; float: left; margin-left: 2%;">
                        <label for="estoque">Estoque</label> <input
                            name="estoque" class="form-control" type="text">
                    </div>
                    <div class="form-group"
                        style="width: 130px; float: left; margin-left: -38%;margin-top: 10%;">
                        <label for="categoria">Categoria</label> <select 
                            name="categoria" class="form-control" type="text" onchange='CheckCat(this.value);'>
                            <option selected disabled hidden>Categoria</option>
                            <c:forEach items="${cBean.listarCategoria}" var="cat">
                            <option  value="${cat.categoria }">${cat.categoria }</option>



                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-group"
                        style="width: 130px; float: left; margin-left: -19%;display: none; margin-top: 10%" id="Outros">
                        <label for="catOutros">Outros</label> <input name="catOutros"
                            class="form-control" type="text" >
                    </div>

                    <div style="width: 30px; margin-top: 25%;float: right;margin-right: 8%">
                        <button class="btn btn-primary" type="submit">Cadastar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以在<a href="#DialogAlterarMaterial" class="btn btn-xs btn-info" data-toggle="modal">Alterar</a>上添加点击事件处理程序。

单击“ Alterar”按钮时，使用jquery在td查找数据，然后将数据设置为模式对话框。

片段供参考：

var $tds = $(this).parent().siblings();
var codigo = $tds.eq(0).html();
...