拿表格行隐藏字段值？

Question

我使用Laravel 5，Blade模板进行构建界面。我想采取特定的行隐藏字段值。

这是我的数据表代码。

           <table>
                 <thead>
                        <tr>
                            <th>Fee  Code</th>
                            <th>Fee Name</th> 
                            <th>Amount</th>  
                            <th class="hidden"></th>
                            <th><p id='buttons'><a href="{{ route('fee-detail.create')}}" class="btn btn-success"><strong> Add New Fee Details &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </a> </p></th>
                    </tr>
                    </thead>

                    <tbody>  
                        <?php $i = 0; ?>
                        @foreach ($fees as $fee)
                        <tr>
                            <td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
                            <td><a href="#" class="" data-toggle="modal"> {{ $fee->feeName }} </a></td> 
                            <td>{{$fee->amount}}</td>
                            <td class="hidden" value="detailId">{{ $i++ }}</td>
                            <td align='center'>
                                {!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
                                <a href="{{route('fee-detail.edit',$fee->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>Fee  Code</th>
                            <th>Fee Name</th> 
                            <th>Amount</th> 
                            <th class="hidden"></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>

我想点击行中的链接（点击超级链接）在代码下面的同一页面中调用此#myModel，我想访问此代码中的点击行隐藏字段值。

 <!-- 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">Fee Details</h4>
            </div>

            <!-- text input -->
            <div class="modal-body">
                <label>Fee Code</label>

                ***//access hidden field*** 

                {{$fees[***put hidden field value***]->feeCode }}
                <input type="text" class="form-control" placeholder="Fee Code " disabled>

                <label>Fee Name</label>
                <input type="text" class="form-control" placeholder="Fee Name" disabled >

                <label>Fee Amount</label>
                <input type="number" class="form-control" placeholder="Fee Name" disabled >

                <label>Fee Description</label>
                <textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>


                <br/><br/><label>Internal Details</label>

                <div class="row">
                    <div class="col-sm-6">
                        <label>Added By</label>
                        <input type="text" class="form-control" placeholder="Fee Added By " disabled>

                        <label>Updated </label>
                        <div class="form-group">
                            <div class="input-group date" id="#">
                                <input type="text" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label>Staff Code</label>
                        <input type="text" class="form-control" placeholder="Fee Staff Code " disabled>

                        <label>Added  </label>
                        <div class="form-group">
                            <div class="input-group date" id="#" >
                                <input type="text" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>                   
                </div>
            </div>
        </div>
    </div>
</div>

完整代码：

    @extends('layouts.app')

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

@section('content')





<section class="content-header">
    <h1>Fee<small> Details</small></h1>
</section>


<br/>

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

                        <thead>
                            <tr>
                                <th>Fee  Code</th>
                                <th>Fee Name</th> 
                                <th>Amount</th>  
                                <th class="hidden"></th>
                                <th><p id='buttons'><a href="{{ route('fee-detail.create')}}" class="btn btn-success"><strong> Add New Fee Details &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </a> </p></th>
                        </tr>
                        </thead>

                        <tbody>  
                            <?php $i = 0; ?>
                            @foreach ($fees as $fee)
                            <tr>
                                <td><a href="#" class="" data-toggle="modal" data-target="#myModal" > {{ $fee->feeCode }} </a></td>
                                <td><a href="#" class="" data-toggle="modal"> {{ $fee->feeName }} </a></td> 
                                <td>{{$fee->amount}}</td>
                                <td class="hidden" value="detailId">{{ $i++ }}</td>
                                <td align='center'>
                                    {!! Form::open(['method' => 'DELETE', 'route'=>['fee-detail.destroy',$fee->id]]) !!}
                                    <a href="{{route('fee-detail.edit',$fee->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>Fee  Code</th>
                                <th>Fee Name</th> 
                                <th>Amount</th> 
                                <th class="hidden"></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div><!-- /.col -->
    </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">Fee Details</h4>
            </div>

            <!-- text input -->
            <div class="modal-body">
                <label>Fee Code</label>

                {{$fees[0]->feeCode }}
                <input type="text" class="form-control" placeholder="Fee Code " disabled>

                <label>Fee Name</label>
                <input type="text" class="form-control" placeholder="Fee Name" disabled >

                <label>Fee Amount</label>
                <input type="number" class="form-control" placeholder="Fee Name" disabled >

                <label>Fee Description</label>
                <textarea class="form-control" rows="3" placeholder="Fee Description" disabled></textarea>


                <br/><br/><label>Internal Details</label>

                <div class="row">
                    <div class="col-sm-6">
                        <label>Added By</label>
                        <input type="text" class="form-control" placeholder="Fee Added By " disabled>

                        <label>Updated </label>
                        <div class="form-group">
                            <div class="input-group date" id="#">
                                <input type="text" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label>Staff Code</label>
                        <input type="text" class="form-control" placeholder="Fee Staff Code " disabled>

                        <label>Added  </label>
                        <div class="form-group">
                            <div class="input-group date" id="#" >
                                <input type="text" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>                   
                </div>
            </div>
        </div>
    </div>
</div>

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

    var slide_bar_element = document.getElementById("fd_menu");
    document.getElementById("fd_menu").className = "active";
</script>

@endsection

Answer 1

您可以将readonly属性的输入设置为true并对其应用一些样式（border:none;）以删除输入外观！

之后在href标签的onclick上创建JavaScript函数获取该输入的值！你也可以用JavaScript打开模态！

function test(){
  $('#myModal').modal('toggle');
  $('#rowValue').empty().append($("#inputID").val());
  }

.inputStyle{
  border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<table>
  <tr>
    <td><a onclick="test()" ><input type="text" readonly="true" class="inputStyle" id="inputID" value="your value " /> </a></td>
    </tr>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
        <p id="rowValue"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>