我正在用 html 设计一个表,它在一个 td 中包含 time picker
作为开始时间,在第二个 td 中包含第二次时间选择器作为在一个 tr 中的结束时间。我想获取两个值(开始时间和结束时间)并想计算时差并想在第三个 td 中显示。但我无法获得特定的 td 值来计算差异。
<table id="example1" class="machinetable" cellspacing="0" width="100%">
<thead>
<tr>
<th>Sr. no.</th>
<th>Machine Name</th>
<th >Rate Type</th>
<th >Rate Unit</th>
<th >Rate</th>
<th >Start Time</th>
<th >End Time</th>
<th >Total Time</th>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>JCB</td>
<td>MH23GH5477</td>
<td>per Hour</td>
<td>1000</td>
<td>
<div class="input-group"><input name="start_time" value="" class="form-control form-cont datetime start_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span>
</div>
</td>
<td>
<div class="form-group nomargin">
<div class="input-group" ><input name="end_time" value="" onchange="calculate_time(this.value)" class="form-control form-cont datetime end_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span></div>
</div>
</td>
<td class="total_time"></td>
</tr>
<tr role="row" class="odd">
<td>2</td>
<td>JCB</td>
<td>MH2398</td>
<td>per Hour</td>
<td>1000</td>
<td>
<div class="input-group" ><input name="start_time" value="" class="form-control form-cont datetime start_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span>
</div>
</td>
<td>
<div class="form-group nomargin">
<div class="input-group" ><input name="end_time" value="" onchange="calculate_time(this.value)" class="form-control form-cont datetime end_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span></div>
</div>
</td>
<td class="total_time"></td>
</tr>
</tbody>
Javascript 函数:
function calculate_time(time)
{
var endtime1 = time;
var starttime1=
$(this).closest('td').prev('td').find("input[name=start_time]")val();
alert(starttime1);
alert(endtime1);
}
获取错误:
start time undefined
我是 js 新手。
最佳答案
因为你是在函数内部使用当前元素的引用,所以首先在函数中传递 this
而不是 this.value
。您还错过了 val()
之前的点 (.
)。
现在像下面这样改变函数:
function calculate_time(time){
var endtime1 = time.value;
var starttime1= $(time).closest('td').prev('td').find('.start_time').val();
alert(starttime1);
alert(endtime1);
}
function calculate_time(time){
var endtime1 = time.value;
var starttime1= $(time).closest('td').prev('td').find('.start_time').val();
alert(starttime1);
alert(endtime1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="machinetable" cellspacing="0" width="100%">
<thead>
<tr>
<th>Sr. no.</th>
<th>Machine Name</th>
<th >Rate Type</th>
<th >Rate Unit</th>
<th >Rate</th>
<th >Start Time</th>
<th >End Time</th>
<th >Total Time</th>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>JCB</td>
<td>MH23GH5477</td>
<td>per Hour</td>
<td>1000</td>
<td>
<div class="input-group"><input name="start_time" value="" class="form-control form-cont datetime start_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span>
</div>
</td>
<td>
<div class="form-group nomargin">
<div class="input-group" ><input name="end_time" value="" onchange="calculate_time(this)" class="form-control form-cont datetime end_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span></div>
</div>
</td>
<td class="total_time"></td>
</tr>
<tr role="row" class="odd">
<td>2</td>
<td>JCB</td>
<td>MH2398</td>
<td>per Hour</td>
<td>1000</td>
<td>
<div class="input-group" ><input name="start_time" value="" class="form-control form-cont datetime start_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span>
</div>
</td>
<td>
<div class="form-group nomargin">
<div class="input-group" ><input name="end_time" value="" onchange="calculate_time(this)" class="form-control form-cont datetime end_time" type="text"><span class="input-group-addon group-addon"><span><i class="fa fa-clock-o" aria-hidden="true"></i></span></span></div>
</div>
</td>
<td class="total_time"></td>
</tr>
</tbody>
关于javascript - 如何在 javascript 中获取最接近的输入类型文本值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50186663/