javascript - 通过标签传递值(使用html中的链接传递数据值值)？

Question

我使用href来调用同一页面对话框id。

这是我的代码部分

                  <tbody>                  

                        @foreach ($basl_officers as $basl_officer)
                        <tr >
                            <td><a href="#myModal" data-toggle="modal" data-target="#myModal"> {{ $basl_officer->code }} </a></td>        

                            <td align='center'>
                                {!! Form::open(['method' => 'DELETE', 'route'=>['basl_officers_page.destroy',$basl_officer->id]]) !!}
                                <a href="{{route('basl_officers_page.edit',$basl_officer->id)}}" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> </a> &nbsp &nbsp
                                <button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button> 
                                {!! Form::close() !!}
                            </td> 
                        </tr>


                        @endforeach

                    </tbody>

//模型对话框代码

 <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
                <a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-trash"></span> </a>
                <a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-pencil"></span> </a>
                <h4 class="modal-title">BASL  Officers  Details {{ $basl_officer }} </h4>
            </div>



            <!-- text input -->
            <div class="modal-body">

                {!! Form::label('o_code', 'Officers Code: '); !!}
                {!! Form::text('officers_code', null, ['class' => 'form-control', 'id' => 'officers_code','disabled' => 'disabled']); !!}


                {!! Form::label('o_name', 'Officers Name: '); !!}
                {!! Form::text('officers_name', null, ['class' => 'form-control', 'id' => 'officers_name','disabled' => 'disabled']); !!}


            </div>
        </div>

    </div>
</div>

我想将选择表行、$basl_officer对象传递给这个#myModal对话。有什么办法可以做到这一点吗？请尽快期待专家的帮助。从一周开始我就尝试用不同的方式来做这件事。我使用 Laravel 5 框架。

////////////////////完整代码//////////////////////////////////////////////////

    @extends('layouts.app')

@section('slide_bar')
@include('layouts.master_entry_slide_bar')
@endsection

@section('content')




<section class="content-header">
    <h1>BASL  Officers  <small>page </small></h1>
</section>


<br/>

<!-- Main content -->
<section class="content fluid">
    <div class="row">
        <div class="box">
            <div class="gap">
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <col width='auto'>
                        <col width='auto'>
                        <col width='100'>

                        <thead>
                            <tr>
                                <th>BASL Officers Code</th>
                                <th>BASL Officers Name</th>
                                <th><p id='buttons'> <a href="{{ route('basl_officers_page.create')}}" class="btn btn-success"> <strong> Add New Officers &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </a> </p></th>
                        </tr>
                        </thead>
                        <tbody>                  

                            @foreach ($basl_officers as $basl_officer)
                            <tr >
                                <td><a href="#myModal" data-toggle="modal" data-target="#myModal">  {{ $basl_officer->code }} </a></td>        
                                <td><a href="#" >{{ $basl_officer->officerName }} </a></td>        
                                <td align='center'>
                                    {!! Form::open(['method' => 'DELETE', 'route'=>['basl_officers_page.destroy',$basl_officer->id]]) !!}
                                    <a href="{{route('basl_officers_page.edit',$basl_officer->id)}}" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> </a> &nbsp &nbsp
                                    <button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button> 
                                    {!! Form::close() !!}
                                </td> 
                            </tr>
                            @endforeach

                        </tbody>
                        <tfoot>
                            <tr>
                                <th>BASL Officers Code</th>
                                <th>BASL Officers Name</th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div>

    </div><!-- /.row -->

</section><!-- /.content -->

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
                <a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-trash"></span> </a>
                <a href="#" class="btn btn-default" style='float: right;'> <span class="glyphicon glyphicon-pencil"></span> </a>
                <h4 class="modal-title">BASL  Officers  Details {{ $basl_officer }} </h4>

            </div>



            <!-- text input -->
            <div class="modal-body">
                <p>One fine body&hellip;</p>

                {!! Form::label('o_code', 'Officers Code: '); !!}
                {!! Form::text('officers_code', null, ['class' => 'form-control', 'id' => 'officers_code','disabled' => 'disabled']); !!}


                {!! Form::label('o_name', 'Officers Name: '); !!}
                {!! Form::text('officers_name', null, ['class' => 'form-control', 'id' => 'officers_name','disabled' => 'disabled']); !!}


            </div>
        </div>

    </div>
</div>


<script>
            var name = document.getElementById("master_entry");
            document.getElementById("master_entry").className = "active";
            var slide_bar_element = document.getElementById("bd_menu");
            document.getElementById("bd_menu").className = "active";
            var slide_bar_element = document.getElementById("bd_submenu1");
            document.getElementById("bd_submenu1").className = "active";

</script>



<script>            
    $('#myModal').on('shown.bs.modal', function (e) {
             $('.modal-body').text($(e.relatedTarget).text());
    }
</script>




@endsection

我想在此对话框中显示选定的表行数据值

Answer 1

您可以使用bootstrap-modal的shown.bs.modal事件并捕获related target这触发了modal如下:

$('#myModal').on('shown.bs.modal', function (e) {
  alert($(e.relatedTarget).text());
})

<强> DEMO

<小时/>

更新

通过查看您的代码结构，我可以为您提供一种可能的解决方案，如下所示:

<script type="text/javascript">
    var name = document.getElementById("master_entry");
    document.getElementById("master_entry").className = "active";
    var slide_bar_element = document.getElementById("bd_menu");
    document.getElementById("bd_menu").className = "active";
    var slide_bar_element = document.getElementById("bd_submenu1");
    document.getElementById("bd_submenu1").className = "active";

    //modal part
    $('#myModal').on('shown.bs.modal', function (e) {
        $('.modal-body #officers_code').val($(e.relatedTarget).text());
        //assign officers code to officers_code textbox
        $('.modal-body #officers_name').val($(e.relatedTarget).closest('td').next().find('a').text())
        //get the relatedTarget elements next anchor element and assign its text to officers_name textbox
    })
</script>

<强> DEMO