Question

您好，我在表单中有以下代码。当用户单击按钮时，我想获取当前行以识别单击了哪个按钮

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

有人可以给我一些建议吗？谢谢

Answer 1

您可以使用.closest()来升级当前的<tr>家长，如下所示：

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

Answer 2

您的代码更像是这样：

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

Answer 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);
  });

}）;

它在这里工作了！

Answer 4

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

Answer 5

首先，除非将所有tr和td括在表格中，否则您的jQuery根本无法运行：

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

其次，您的代码会获得页面第一个id的{{1}}，因为您选择了页面的所有tr并获得了tr第一个（ .attr() 返回其使用的元素集中第一个元素的属性。

您当前的代码：

id

的 trid is always TEST1 (jsFiddle)

您希望选择$('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 });点击tr的{{1}}的第一个祖先，而不是选择$('tr')页面上的所有input。在tr。
格式中使用 .closest()
您可以将单击的元素引用为$(this).closest('tr')，使用this形式创建一个jQuery对象，这样您就可以访问它上面的所有jQuery方法。

您的代码应该是什么样的：

$(this)

的 jsFiddle example

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

Answer 7

用css名称创建一个类.buttoncontact，将class属性添加到按钮

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

Answer 8

$('#tblCart tr').click(function () {
        var tr_id = $(this).attr('id'); 
        alert(tr_id );
    });



<table class="table table-striped table-bordered table-hover" id="tblCart" cellspacing="0" align="center" >
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Item.ItemName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Price.PriceAmount)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Quantity)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Subtotal)
                    </th>
                    <th></th>
                </tr>

               @if (cart != null)
               {
                   foreach (var vm in cart)
                   {
                    <tr id="@vm.Id">
                        <td>
                            @Html.DisplayFor(modelItem => vm.Item.ItemName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => vm.Price.PriceAmount)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => vm.Quantity)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => vm.Subtotal)
                        </td>
                        <td >                            
                            <span style="width:80px; text-align:center;" class="glyphicon glyphicon-minus-sign" />                        
                        </td>
                    </tr>  
                   }
               }
            </table>

使用Jquery获取当前表行的Id

8 个答案:

的 trid is always TEST1 (jsFiddle)

的 jsFiddle example