javascript - 如何将值从实际行传递到 Bootstrap 模型

Question

我想编辑表(jsp 和 bootstrap)中的数据，如果我单击某个编辑按钮，则会显示一个模式对话框，其中已包含所选行的值。因此 Bootstrap 对话框应该包含我单击的行的值。

表:

<table  id="example" class="table table-bordered table-striped">

                                        <thead>
                                            <tr>
                                                <td >Type</td>
                                                <th>Marque</th>
                                                <th>Date fin</th>
                                                <th>Date prochaine</th>
                                                <th>Résoudre
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <s:iterator value="%{#session['liste']}" status="userStatus">
                                            <tr>
                                                <td  class="type" ><s:property  value="type" /></td>
                                                <td><s:property value="marque" /></td>
                                                <td><s:date name="dt_fin" format="dd/MM/yyyy"/></td>
                                                <td><s:date name="dt_proch" format="dd/MM/yyyy" /></td>
                                                <td><button class="btn btn-info" onclick="resoudre()" > Résoudre</button>
                                                </td>                                               
                                            </tr>
                                            </s:iterator>
                                        </tbody>

                                    </table>

型号:

<!-- COMPOSE MESSAGE MODAL -->

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><i class="fa fa-envelope-o"></i> Ajouter assurance</h4>
                    </div>
                    <s:form  enctype="multipart/form-data" theme="bootstrap">
                        <div class="modal-body">

                            <div class="form-group" >
                                 <div class="form-group"><div class="row">
                                        <div class="col-lg-offset-3 col-md-5">
                                    <s:textfield name="type" class="type" cssClass="form-control" label="type" id="type"></s:textfield>
                                    </div></div>
                            </div></div>



                            <button type="submit" id="submit" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i> Enregistrer</button>
                        </div>
                    </s:form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

我尝试使用这个js代码:

function resoudre() {

    var myModal = $("#myModal");

// now get the values from the table
    var type= $(this).closest("tr").find("td.type").html();
alert(type);

    // and set them in the modal:
    $('.type', myModal).val(type);


    // and finally show the modal
    myModal.modal({ show: true });


}

我的问题是如何通过单击 etit 按钮将值从表传递到模型？

Answer 1

您需要在函数调用中传递元素:

onclick="resoudre(this)"

并在您的函数中，使用作为参数传递的元素:

function resoudre(elem) {

    var type= $(elem).closest("tr").find("td.type").html();
}

<强> DEMO