javascript - 如何在 javascript 中获取最接近的输入类型文本值？

Question

我正在用 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 新手。

Answer 1

因为你是在函数内部使用当前元素的引用，所以首先在函数中传递 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>