堆棧內存溢出
  簡體   English   中英

取表行的隱藏字段值？

[英]Take table row hidden field value?

 原文  2015-09-15 03:54:19  3   1    javascript/ php/ html5/ laravel-5

問題描述

我將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

1 個解決方案

解決方案1
 0  2015-09-15 04:56:43

您可以將輸入的readonly屬性設置為true，並對其應用某種樣式（ border:none; ）以刪除輸入外觀！

之后，使JavaScript函數在href標簽的onclick中獲得該輸入的值！ 您也可以使用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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery在表行中獲取隱藏字段值 從表行的隱藏輸入字段中獲取值 使用jquery，如何獲取表的選定行中@ Html.Hidden字段的值？ 在行上單擊表中獲取隱藏的列值 為Handson表中的每一行添加一個隱藏值 獲取價值數據並使用javascript刪除行表 使用td標簽中的value字段作為html表中的隱藏字段 在表中顯示隱藏的行 帶有隱藏行的克隆表 .closest() 獲取隱藏的 div 值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM