Не могу по нажатию кнопки выводить значение

632
03 февраля 2017, 06:38

Доброго всем дня, в приложении присутствует таблица с колонкой Id и к каждой колонке есть кнопка. Нужно по нажатию кнопки вводить в консоль значение Id написал скрипт который по нажатию выводит в консоль id строки. Но почему-то не работает. Так я вывожу допустим значение Id 4-й строки:

var a = $('.inputik').eq(3).val();
console.log(a);

но мне надо id той колонки, где нажата кнопка. Cделал так, но не сработало: 

var a = $('.inputik').eq(this).val();
console.log(a);

Вот моя примерная таблица надо по нажатию на кнопку ввдить значене из Hidden input 

     <table>
    <thead>
    <tr>
    <th scope="col">ID</th>
    <th scope="col">Name</th>
    <th scope="col">Num</th>
    <th scope="col">Lat</th>
    <th scope="col">Lot</th>
    <th scope="col">Status</th>
    <th scope="col">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class="first">1</td>
    <td>Driver1</td>
    <td> 01</td>
    <td>0</td>
    <td> 0</td>
    <td>offline</td>
    <td><button id="j_idt8:0:myButn" name="j_idt8:0:myButn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button" onclick="show();PrimeFaces.ab({s:'j_idt8:0:myButn',a:true});return false;" style="background: grey;" type="submit"><span class="ui-button-text ui-c">CHeck</span></button><script id="j_idt8:0:myButn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt8_0_myButn",{id:"j_idt8:0:myButn",widgetVar:"widget_j_idt8_0_myButn"});</script>
<td><input class="inputik" type="hidden" value="Driver1" /></td>
</td>
    </tr>
    <tr>
    <td class="first"> 2 </td>
    <td> Driver2</td>
    <td>02</td>
    <td> 69.442771</td>
    <td> 45.536307</td>
    <td>offline </td>
    <td><button id="j_idt8:1:myButn" name="j_idt8:1:myButn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button" onclick="show();PrimeFaces.ab({s:'j_idt8:1:myButn',a:true});return false;" style="background: grey;" type="submit"><span class="ui-button-text ui-c">CHeck</span></button><script id="j_idt8:1:myButn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt8_1_myButn",{id:"j_idt8:1:myButn",widgetVar:"widget_j_idt8_1_myButn"});</script>
     <td><input class="inputik" type="hidden" value="Driver2" />  </td></td>
    </tr>
    <tr>
    <td class="first">3 </td>
    <td> Driver3</td>
    <td> 03</td>
    <td> 43.380050 </td>
    <td>50.30960</td>
    <td> offline</td>
    <td><button id="j_idt8:2:myButn" name="j_idt8:2:myButn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button" onclick="show();PrimeFaces.ab({s:'j_idt8:2:myButn',a:true});return false;" style="background: grey;" type="submit"><span class="ui-button-text ui-c">CHeck</span></button><script id="j_idt8:2:myButn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt8_2_myButn",{id:"j_idt8:2:myButn",widgetVar:"widget_j_idt8_2_myButn"});</script>
    <td> <input class="inputik" type="hidden" value="Driver3" /></td></td>
    </tr>
    <tr>
    <td class="first"> 4 </td>
    <td>Driver4</td>
    <td>04 </td>
    <td> 50.354619</td>
    <td> 50.078559</td>
    <td> Offline </td>
    <td><button id="j_idt8:3:myButn" name="j_idt8:3:myButn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button" onclick="show();PrimeFaces.ab({s:'j_idt8:3:myButn',a:true});return false;" style="background: grey;" type="submit"><span class="ui-button-text ui-c">CHeck</span></button><script id="j_idt8:3:myButn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt8_3_myButn",{id:"j_idt8:3:myButn",widgetVar:"widget_j_idt8_3_myButn"});</script>
   <td><input class="inputik" type="hidden" value="Driver4" /> </td></td>
    </tr>
    <tr>
    <td class="first">5 </td>
    <td>Driver5 </td>
    <td> 05</td>
    <td>  30.37569 </td>
    <td> 49.778018 </td>
    <td>Offline</td>
    <td><button id="j_idt8:4:myButn" name="j_idt8:4:myButn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button" onclick="show();PrimeFaces.ab({s:'j_idt8:4:myButn',a:true});return false;" style="background: grey;" type="submit"><span class="ui-button-text ui-c">CHeck</span></button><script id="j_idt8:4:myButn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt8_4_myButn",{id:"j_idt8:4:myButn",widgetVar:"widget_j_idt8_4_myButn"});</script>
 <td> <input class="inputik" type="hidden" value="Driver5" /></td></td>
    </tr>
    <tr>
    <td class="first">6</td>
    <td> Driver6</td>
    <td> 06</td>
    <td> 0 </td>
    <td>  0</td>
    <td> Offline  </td>
    <td><button id="j_idt8:5:myButn" name="j_idt8:5:myButn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button" onclick="show();PrimeFaces.ab({s:'j_idt8:5:myButn',a:true});return false;" style="background: grey;" type="submit"><span class="ui-button-text ui-c">CHeck</span></button><script id="j_idt8:5:myButn_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt8_5_myButn",{id:"j_idt8:5:myButn",widgetVar:"widget_j_idt8_5_myButn"});</script>
                   <td>
                   <input class="inputik" type="hidden" value="Driver6" />
                   </td></td>
    </tr>
    </tbody>
    </table>
Answer 1

Вот версия с eq

 $(document).ready(function(){ 
  $('.btn').on('click', function(){ 
   console.log($(this).closest('tr').find('td').eq(0).text()); 
  }) 
 })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
<tr> 
  <td>#1</td> 
  <td>blah</td> 
  <td>blah</td> 
  <td><button class="btn"> 
  click! 
  </button></td> 
</tr> 
<tr> 
  <td>#2</td> 
  <td>blah</td> 
  <td>blah</td> 
  <td><button class="btn"> 
  click! 
  </button></td> 
</tr> 
<tr> 
  <td>#3</td> 
  <td>blah</td> 
  <td>blah</td> 
  <td><button class="btn"> 
  click! 
  </button></td> 
</tr> 
</table>

Когда в 7 элементе кнопка

<table>
<tr>
  <td>#1</td>
  <td>blah</td>
  <td>blah</td>
  <td>blah</td>
  <td>blah</td>
  <td><button class="ui-button">
  click!
  </button></td>
  <td><input class="inputik" type="hidden" value="Driver5" /></td>
</tr>
<tr>
  <td>#2</td>
  <td>blah</td>
  <td>blah</td>
  <td>blah</td> 
  <td>blah</td>
  <td><button class="ui-button">
  click!
  </button></td>
  <td><input class="inputik" type="hidden" value="Driver6" /></td>
</tr>
<tr>
  <td>#3</td>
  <td>blah</td>
  <td>blah</td>
  <td>blah</td>
  <td>blah</td>
  <td><button class="ui-button">
  click!
  </button></td>
  <td><input class="inputik" type="hidden" value="Driver7" /></td>
</tr>
</table>

js

$(document).ready(function(){
  $('.ui-button').on('click', function(){
    console.log($(this).closest('tr').find('td').eq(7).children().val());
  })
})
Answer 2

Вы неверно пытаетесь взять значение через val(), это подходит для тегов типа input, к примеру. С тегами типа td нужно брать их содержимое через html().

$('.btn').on('click', function() { 
    id = $(this).parent().parent().find('td:first-child').html(); 
    console.log(id); 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
    <tr> 
      <td>#1</td> 
      <td>blah</td> 
      <td>blah</td> 
      <td><button class="btn"> 
      click! 
      </button></td> 
    </tr> 
    <tr> 
      <td>#2</td> 
      <td>blah</td> 
      <td>blah</td> 
      <td><button class="btn"> 
      click! 
      </button></td> 
    </tr> 
    <tr> 
      <td>#3</td> 
      <td>blah</td> 
      <td>blah</td> 
      <td><button class="btn"> 
      click! 
      </button></td> 
    </tr> 
    </table>

Answer 3

Хочу предложить такой новаторский вариянт:

<tr>
  <td>#3</td>
  <td>blah</td>
  <td>blah</td>
  <td><button class="btn" data-row-index="3">
      click!
  </button></td>
</tr>

Скрипт

$('.btn').on('click', function() {
   var id = $('.inputik').eq($(this).data('rowIndex')).val();
   console.log(id);
});

С недавних пор стало возможным к элементами добавлять произвольный data-атрибуты. Эту возможность нам предоставил HTML5. Убедитесь, что Ваш браузер поддерживает HTML5. Добавить к кнопке data-атрибут data-row-id со значением равным индексу строки. Этот атрибут извлекается в обработчике и автор вопроса может воспользоваться так полюбившейся ему функцией eq, не утруждая себя вычислением индекса строки.

READ ALSO
Инкапсуляция JavaScript
javascript

Инкапсуляция JavaScript

Как достать инкапсулированное значение в прототип?

 388
Мультистроковая регулярка
javascript

Мультистроковая регулярка

Пробую выделить текст двумя регуляркамиПервая не работает в js из-за метасимвола \b

 299
Куда можно подключить карту Google JavaScript Maps
javascript

Куда можно подключить карту Google JavaScript Maps

Добрый день,таков вопросКуда можно подключить свою карту Google JavaScript Maps API 3,тем самым добавлять к ней скрипты,стили (CSS)

 312
Сгруппировать блоки по нумерации
javascript

Сгруппировать блоки по нумерации

Добрый день!

 328