javascript - How to get closest input type text's value in javascript?
问题描述
I am designing one table in html and it contains time picker
in one td as start time and second time picker in second td as end time in one tr. I want to take both values (start time and end time) and want to calculate time difference and want to show in third td. But i am not able to get particular td's value to calculate difference.
<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:
function calculate_time(time)
{
var endtime1 = time;
var starttime1=
$(this).closest('td').prev('td').find("input[name=start_time]")val();
alert(starttime1);
alert(endtime1);
}
Getting error :
start time undefined
I am new to 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>
推荐阅读
- flutter - 从表列中检索具有非空字符串的值的行
- javascript - 如何在其他js中比较一个数组的元素
- webpack - 带有 webpack 的数据表
- android - react-native 使用emu成功发送图像表单数据,但在真实设备上出现错误422
- python - SimPy:TypeError:schedule() 缺少 1 个必需的位置参数:“事件”
- amazon-web-services - AWS 代码构建:CI 作业期间未找到环境变量
- ios - 代码中的 UIStackView 设置 layoutMargins 会中断对齐
- numbers - 雪花:无法评估不受支持的子查询类型
- vbscript - 检查随机数是否已经存在VBscript
- grails - 如何在 Grails 4 中向创建和编辑表单添加多个枚举字段?