Получить идентификатор текущей строки таблицы с помощью JQuery

Привет У меня есть следующий код в форме. Когда пользователь нажимает кнопку, я хочу получить текущую строку, чтобы определить, какая из кнопок была нажата.

<tr  id="TEST1" >
    <td align="left" valign="middle">
        <div align="right">Contact</div>
    </td>
    <td colspan="4" align="left" valign="middle">
        <input type="text" id="contact1" size="20" />  Number 
        <input type="text" id="number1" size="20" /> 
    </td>
    <td>
        <input type="button"  value="Button 1" id="contact1" />
    </td>
</tr>
<tr id="TEST2" >
    <td align="left" valign="middle">
        <div align="right">Contact</div>
    </td>
    <td colspan="4" align="left" valign="middle">
        <input type="text" id="contact2" size="20" />  Number 
        <input type="text" id="number2" size="20" /> 
    </td>
    <td>
        <input type="button"  value="Button 1"  id="contact2" />
    </td>
</tr>
<tr id="TEST3" >
    <td align="left" valign="middle">
        <div align="right">Contact</div>
    </td>
    <td colspan="4" align="left" valign="middle">
        <input type="text" id="contact3" size="20" />  Number 
        <input type="text" id="number3" size="20" /> 
    </td>
    <td>
        <input type="button"  value="Button 1"  id="contact2" />
    </td>
</tr>

Я думал, что следующий Jquery вернет имя ID, но это не

$('input[type=button]' ).click(function() {
    bid = (this.id) ; // button ID 
    trid = $('tr').attr('id'); // table row ID 
});

Может ли кто-нибудь дать мне совет? спасибо

Ответы

Ответ 1

Вы можете использовать .closest(), чтобы перейти к текущему родительскому элементу <tr>, например:

$('input[type=button]' ).click(function() {
   var bid = this.id; // button ID 
   var trid = $(this).closest('tr').attr('id'); // table row ID 
 });

Ответ 2

Ваш код будет больше похож на:

$('tr input[type=button]').click(function(){
    id = $(this).closest('tr').attr('id');
});

Ответ 3

Это:

<table id="test">
      <tr  id="TEST1" >
          <td align="left" valign="middle"><div align="right">Contact</div></td>
          <td colspan="4" align="left" valign="middle">
          <input type="text" id="contact1" size="20" />  Number 
          <input type="text" id="number1" size="20" /> 
          </td>
          <td>
          <input type="button"  value="Button 1" id="contact1" /></td>
      </tr>


      <tr id="TEST2" >
          <td align="left" valign="middle"><div align="right">Contact</div></td>
          <td colspan="4" align="left" valign="middle">
          <input type="text" id="contact2" size="20" />  Number 
          <input type="text" id="number2" size="20" /> 
          </td>
          <td>
          <input type="button"  value="Button 1"  id="contact2" />
          </td> 
      </tr>

      <tr id="TEST3" >
          <td align="left" valign="middle"><div align="right">Contact</div></td>
          <td colspan="4" align="left" valign="middle">
          <input type="text" id="contact3" size="20" />  Number 
          <input type="text" id="number3" size="20" /> 
          </td>
          <td>
          <input type="button"  value="Button 1"  id="contact2" />
          </td> 
</tr>

и javascript:

$(function() {
  var bid, trid;
  $('#test tr').click(function() {
       trid = $(this).attr('id'); // table row ID 
       alert(trid);
  });

});

Он работал здесь!

Ответ 4

Во-первых, ваш jQuery не будет работать вообще, если вы не вложите все ваши tr и td в таблицу:

<table>
    <tr>...</tr>
    ...
</table>

Во-вторых, ваш код получает id первого tr страницы, так как вы выбираете все tr страницы и получаете id первого ( .attr() возвращает атрибут первого элемента в наборе элементов, в котором он используется)

Ваш текущий код:

  $('input[type=button]' ).click(function() {
   bid = (this.id) ; // button ID 
   trid = $('tr').attr('id'); // ID of the the first TR on the page
                              // $('tr') selects all trs in the DOM
  });

trid всегда TEST1 (jsFiddle)


Вместо того, чтобы выбрать все tr на странице с помощью $('tr'), вы хотите выбрать первого предка клика на input, который является tr. Используйте .closest() для этого в форме $(this).closest('tr').

Вы можете ссылаться на элемент clicked on как this, вывести объект jQuery из него с формой $(this), чтобы у вас был доступ ко всем методам jQuery на нем.

Как выглядит ваш код:

  // On DOM ready...
$(function() {

      $('input[type=button]' ).click(function() {

          var bid, trid; // Declare variables. If you don't use var 
                         // you will bind bid and trid 
                         // to the window, since you make them global variables.

          bid = (this.id) ; // button ID 

          trid = $(this).closest('tr').attr('id'); // table row ID 
      });
});

Пример jsFiddle

Ответ 5

$('input[type=button]' ).click(function() {
   var bid = jQuery(this).attr('id'); // button ID 
   var trid = $(this).parents('tr:first').attr('id'); // table row ID 
 });

Ответ 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>

<script type="text/javascript"><!--

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    alert(targ.innerHTML);
}

onload = function() {
    var t = document.getElementById("main").getElementsByTagName("td");
    for ( var i = 0; i < t.length; i++ )
        t[i].onclick = getVal;
}

</script>



<body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>

Ответ 7

Создайте класс в css, назовите его .buttoncontact, добавьте атрибут класса к вашим кнопкам

function ClickedRow() {
    $(document).on('click', '.buttoncontact', function () {
        var row = $(this).parents('tr').attr('id');
        var rowtext = $(this).closest('tr').text();
        alert(row);      
    });
}