【发布时间】：2020-05-18 07:51:01
【问题描述】：
所以我在这里有几个我无法弄清楚的问题：
尽管有style="display:none"，但我的表单仍在显示，而我对#createBtn 的jquery 点击操作不起作用。我不知道为什么....也许一些更清晰的头脑可以给我一些洞察力？
@extends('layouts.app')
@section('content')
<div class="col-md-10 offset-md-1">
<div class="row justify-content-center">
<table class="table">
<thead>
<tr class="d-flex">
<th style="width:19%">Date</th>
<th style="width:10%">Start time</th>
<th style="width:10%">Duration (min)</th>
<th style="width:10%">End time</th>
<th style="width:10%">Fee (EUR)</th>
<th style="width:10%">Status</th>
<th style="width:15%">Student</th>
<th style="width:16%">Action</th>
</tr>
</thead>
<tbody>
@foreach ($lessons as $lesson)
<tr class="d-flex">
<td style="width:19%">{{$lesson->date()}}</td>
<td style="width:10%">{{$lesson->startTime()}}</td>
<td style="width:10%">{{$lesson->duration()}}</td>
<td style="width:10%">{{$lesson->endTime()}}</td>
<td style="width:10%">{{$lesson->fee}}</td>
<td style="width:10%">{{$lesson->status}}</td>
<td style="width:15%">{{$lesson->user->name?? ''}}</td>
<td style="width:16%"></td>
</tr>
@endforeach
<div id="createBtnDiv">
<tr class="d-flex">
<td style="width:100%; text-align:center">
<button type="button" id="createBtn" class="btn btn-primary"><i class="fa fa-plus"></i> Add a new lesson</button>
</td>
</tr>
</div>
<form id="createForm" style="display:none" action="{{route('admin.lessons.store', ['admin_username' => $admin->username])}}" method="post">
@csrf
<tr class="d-flex">
<td style="width:19%;">
<div class="date" id="datepicker" data-target-input="nearest" style="position:relative;">
<input type="text" id="datePickerInput" class="form-control datePicker datetimepicker-input{{ $errors->has('date') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#datepicker" name="date"/>
</div>
@if ($errors->has('date'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('date') }}</strong>
</span>
@endif
</td>
<td style="width:10%">
<div class="date" id="startTimePicker" data-target-input="nearest" style="position:relative;">
<input type="text" id="startTimePickerInput" class="form-control startTimePicker datetimepicker-input{{ $errors->has('start_time') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#startTimePicker" name="start_time"/>
</div>
@if ($errors->has('start_time'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('start_time') }}</strong>
</span>
@endif
</td>
<td style="width:10%">
<select id="duration" class="form-control duration" name="duration">
<option selected>60</option>
<option>45</option>
<option>30</option>
</select>
</td>
<td style="width:10%">
<input class="form-control" id="endTimePicker" type="text" value="" placeholder="" disabled>
</td>
<td style="width:10%">
<input class="form-control" id="fee" name="fee" type="text" value="{{old('fee')?? $admin->adminSetting->fee}}">
@if ($errors->has('fee'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('fee') }}</strong>
</span>
@endif
</td>
<td style="width:10%"></td>
<td style="width:15%"></td>
<td style="width:16%">
<button type="submit" class="btn btn-primary">Submit</button>
</td>
</tr>
</form>
</tbody>
</table>
</div>
</div>
@endsection
@section('javascript')
<script>
$(document).on('click','#createBtn', function() {
console.log('clicked');
$('#createBtnDiv').hide();
$('#createForm').show();
});
var startTime = moment();
var duration = $('select.duration').children('option:selected').val();
var endTime = moment().add(duration, 'm').format('HH:mm');
$('#endTimePicker').val(endTime);
$(function () {
$('#datepicker').datetimepicker({
format: 'ddd DD.MM.YYYY',
useCurrent: false,
defaultDate: moment()
});
$('#datepicker').on("change.datetimepicker", function (e) {
if (e.date == undefined) {
$('input.datePicker').val(startTime.format('DD.MM.YYYY'));
}
})
});
$(function () {
$('#startTimePicker').datetimepicker({
format: 'HH:mm',
useCurrent: false,
defaultDate: moment()
});
$('#startTimePicker').on("change.datetimepicker", function (e) {
if (e.date == undefined) {
$('input.startTimePicker').val(startTime.format('HH:mm'));
} else {
startTime = e.date;
}
duration = $('select.duration').children('option:selected').val();
endTime = startTime.add(duration, 'm').format('HH:mm');
$('#endTimePicker').val(endTime);
})
});
$(function () {
$('#duration').on("change", function (e) {
startTime = $('#startTimePicker').datetimepicker('viewDate')
duration = $(this).val();
endTime = startTime.add(duration, 'm').format('HH:mm');
$('#endTimePicker').val(endTime);
})
});
</script>
@endsection
编辑：现在我已将表格放在表格之外，我打算通过 jquery 填充隐藏的输入。但我仍然无法隐藏包含输入字段的 tr？？
@extends('layouts.app')
@section('content')
<div class="col-md-10 offset-md-1">
<div class="row justify-content-center">
<table class="table">
<thead>
<tr class="d-flex">
<th style="width:19%">Date</th>
<th style="width:10%">Start time</th>
<th style="width:10%">Duration (min)</th>
<th style="width:10%">End time</th>
<th style="width:10%">Fee (EUR)</th>
<th style="width:10%">Status</th>
<th style="width:15%">Student</th>
<th style="width:16%">Action</th>
</tr>
</thead>
<tbody >
@foreach ($lessons as $lesson)
<tr class="d-flex">
<td style="width:19%">{{$lesson->date()}}</td>
<td style="width:10%">{{$lesson->startTime()}}</td>
<td style="width:10%">{{$lesson->duration()}}</td>
<td style="width:10%">{{$lesson->endTime()}}</td>
<td style="width:10%">{{$lesson->fee}}</td>
<td style="width:10%">{{$lesson->status}}</td>
<td style="width:15%">{{$lesson->user->name?? ''}}</td>
<td style="width:16%"></td>
</tr>
@endforeach
<tr class="d-flex" id ="createBtnTr">
<td style="width:100%; text-align:center">
<button type="button" id="createBtn" class="btn btn-primary"><i class="fa fa-plus"></i> Add a new lesson</button>
</td>
</tr>
<tr class="d-flex" style="display:none">
<td style="width:19%;">
<div class="date" id="datepicker" data-target-input="nearest" style="position:relative;">
<input type="text" id="datePickerInput" class="form-control datePicker datetimepicker-input{{ $errors->has('date') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#datepicker"/>
</div>
@if ($errors->has('date'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('date') }}</strong>
</span>
@endif
</td>
<td style="width:10%">
<div class="date" id="startTimePicker" data-target-input="nearest" style="position:relative;">
<input type="text" id="startTimePickerInput" class="form-control startTimePicker datetimepicker-input{{ $errors->has('start_time') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#startTimePicker"/>
</div>
@if ($errors->has('start_time'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('start_time') }}</strong>
</span>
@endif
</td>
<td style="width:10%">
<select id="duration" class="form-control duration">
<option selected>60</option>
<option>45</option>
<option>30</option>
</select>
</td>
<td style="width:10%">
<input class="form-control" id="endTimePicker" type="text" value="" placeholder="" disabled>
</td>
<td style="width:10%">
<input class="form-control" id="feeInput" type="text" value="{{old('fee')?? $admin->adminSetting->fee}}">
@if ($errors->has('fee'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('fee') }}</strong>
</span>
@endif
</td>
<td style="width:10%"></td>
<td style="width:15%"></td>
<td style="width:16%">
<button type="button" id="submitBtn" class="btn btn-primary">Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<form id="createForm" action="{{route('admin.lessons.store', ['admin_username' => $admin->username])}}" method="post">
@csrf
<input type="hidden" name="date">
<input type="hidden" name="start_time">
<input type="hidden" name="duration">
<input type="hidden" name ="fee">
</form>
@endsection
@section('javascript')
<script>
$(document).on('click','#createBtn', function() {
$('#createBtnTr').hide();
});
var startTime = moment();
var duration = $('select.duration').children('option:selected').val();
var endTime = moment().add(duration, 'm').format('HH:mm');
$('#endTimePicker').val(endTime);
$(function () {
$('#datepicker').datetimepicker({
format: 'ddd DD.MM.YYYY',
useCurrent: false,
defaultDate: moment()
});
$('#datepicker').on("change.datetimepicker", function (e) {
if (e.date == undefined) {
$('input.datePicker').val(startTime.format('DD.MM.YYYY'));
}
})
});
$(function () {
$('#startTimePicker').datetimepicker({
format: 'HH:mm',
useCurrent: false,
defaultDate: moment()
});
$('#startTimePicker').on("change.datetimepicker", function (e) {
if (e.date == undefined) {
$('input.startTimePicker').val(startTime.format('HH:mm'));
} else {
startTime = e.date;
}
duration = $('select.duration').children('option:selected').val();
endTime = startTime.add(duration, 'm').format('HH:mm');
$('#endTimePicker').val(endTime);
})
});
$(function () {
$('#duration').on("change", function (e) {
startTime = $('#startTimePicker').datetimepicker('viewDate')
duration = $(this).val();
endTime = startTime.add(duration, 'm').format('HH:mm');
$('#endTimePicker').val(endTime);
})
});
</script>
@endsection
【问题讨论】：
-
HTML 无效。
<form>和<div>不能是<tbody>的直接子代或将<tr>作为子代。 -
哦哇我不知道...谢谢！
-
a可以是
的子元素，对吧？ 是的....虽然不是父母。表格元素有非常具体的规则
标签： javascript jquery