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

时间：2018-05-05 06:57:02

标签： javascript jquery html jquery-selectors

我在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);
}

获取错误：

  

开始时间未定义

我是js的新手。

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

您的代码中存在以下几个问题：

  1. 您可以传递calculate_time()函数中元素的引用，以便您可以使用该元素查找其附近的其他元素。目前$(this)内的calculate_time()引用了Window对象，而不是您的实际元素。
  2. 在$(elem).closest('td').prev('td').find("input[name=start_time]").val()函数中传递元素引用后使用calculate_time()。

    3. 以下是获取start_time和end_time值的工作示例，您仍需要将其与日期字段集成，并在使用以下代码获取日期值后计算差异： 

    function calculate_time(elem)
{
   var endtime1 = elem.value;
   var starttime1 = $(elem).closest('td').prev('td').find("input[name=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 Hover</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 Hover</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>

答案 2 :(得分：0)

在调用这样的函数时再传递一个参数onchange =“calculate_time（this.value，'1'）”  其中1是start_time的id 如下所示

<input name="start_time" id="start_time1" value="" class="form-control form-cont datetime start_time" type="text">

然后你的功能如下：

<script>
function calculate_time(time, id)
{
//alert(id);
   var endtime1 = time;
   var starttime1= $("#start_time"+id).val();

   alert(endtime1);
   alert(starttime1);
}
</script>

希望这会有所帮助！

答案 3 :(得分：0)

试试这个 这里没有验证。 

  <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" id="time_a_1">
          
          <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="" onkeyup="calculate_time(1)" class="form-control form-cont datetime end_time" type="text" id="time_a_2">
            <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" id="time_a"></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" id="time_b_1">
         <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="" onkeyup="calculate_time(2)" class="form-control form-cont datetime end_time" type="text" id="time_b_2">
            <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" id="time_b"></td>
   </tr>
</tbody>

<script>
function calculate_time(time)
{
if(time == 1){
start_time = document.getElementById("time_a_1").value
end_time = document.getElementById("time_a_2").value
total = start_time + end_time
document.getElementById("time_a").innerText = total;
}
else if(time == 2){
start_time = document.getElementById("time_b_1").value
end_time = document.getElementById("time_b_2").value
total = start_time + end_time
document.getElementById("time_b").innerText = total;
}
}
</script>

相关问题
最新问题