Как получить ближайшее текстовое значение типа ввода в javascript?

Я разрабатываю одну таблицу в html, и она содержит time picker в одном td как время начала и второе средство выбора во втором 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.

Вам не хватает точки после поиска

— 05.05.2018 09:14

Спасибо всем за ответ ... но я все равно получаю ту же ошибку. Таблица, которую я использую, является датируемой.

— 05.05.2018 09:15

Можете ли вы разработать jsfiddle, чтобы я мог его протестировать. Трудно восстановить проблему, которая зависит от сторонних инструментов, таких как jquery и средства выбора даты.

— 05.05.2018 09:16

javascript jquery html jquery-selectors

05.05.2018 08:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

583

Ответы 4

В вашем коде есть несколько проблем:

Вы можете передать ссылку на элемент в функции calculate_time(), чтобы вы могли использовать этот элемент для поиска других элементов рядом с ним. В настоящее время $(this) внутри calculate_time() ссылается на объект Window, а не на ваш фактический элемент.
Используйте $(elem).closest('td').prev('td').find("input[name=start_time]").val() после передачи ссылки на элемент в функции calculate_time().

Ниже приведен рабочий пример для получения значения 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>

05.05.2018 09:04

Поскольку вы используете ссылку на текущий элемент внутри функции, сначала передайте в функцию 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>

05.05.2018 09:08

Передайте еще один параметр при вызове такой функции onchange = "calculate_time (this.value, '1')" где 1 - это идентификатор start_time как показано ниже

<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>

Надеюсь, это поможет!

05.05.2018 09:42

Попробуй это здесь нет проверки.

  <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>

05.05.2018 10:14

Другие вопросы по теме

Установите флажок Все / Нет внутри фильтров столбца данных jquery

Запретить добавление стиля в jQuery

Проблема с перерисовкой JQuery Footable

Заполнение массива средними значениями

JQuery работает после второго щелчка, а затем продолжает работать нормально

Как иногда устранить несоответствие ширины столбцов заголовка таблицы DataTables и ширины столбцов тела таблицы?

Select2 не вызывает Ajax

Использование ajax для публикации переменных js в php

Прокрутка дочернего div в родительском div

Используйте ViewPort как единицы в JavaScript

Как получить ближайшее текстовое значение типа ввода в javascript?

Ответы 4

Другие вопросы по теме

Похожие вопросы