标记传递值（使用html中的链接传递数据值）？" src="/default/index/img?u=aHR0cHM6Ly9wMi5waXFzZWxzLmNvbS9wcmV2aWV3LzY2OS82NTMvMTE5L3N0cmF3cy10dWJlLXBsYXN0aWMtY29sb3JmdWwuanBn&w=245&h=&w=700"/>
问题描述：
I use a href to call same page dialog box id.
this is my part of code
<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>    
<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>
//Model dialogue box code
<!-- 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>
I want to pass select table row , $basl_officer object to this #myModal dialogue.is there any way to do this? please expect some expert help as soon as possible. since one week I try to do this different way .I use Laravel 5 framework.
///////////////////full code///////////////////////////////////////////////
@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   </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>    
<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…</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
I want to show selected table row data value in this dialog box
答
You can make use of bootstrap-modal's shown.bs.modal event and capture the related target which triggered the modal as below:
$('#myModal').on('shown.bs.modal', function (e) {
alert($(e.relatedTarget).text());
})
Update
By seeing your code structure, I can give you one possible solution which is as below:
<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>