取錶行隱藏字段值？

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真實屬​​性，並應用一些樣式，（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>