如何在悬停时获取td属性的第一个子节点

时间:2017-03-15 07:20:00

标签: javascript jquery html css events

如何获取以下HOVER的td的第一个子节点并显示属性的值" templateid"等于1或2,取决于悬停时哪个。例如,如果我将鼠标悬停在templateid = 2输入上。我将得到以下值2

<tbody>
  <tr>
     <td><input class="form-group form-control" type="checkbox" templateid="1"> </td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td input class="form-group form-control" type="checkbox" templateid="2"></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
  </tr> 
</tbody>

5 个答案:

答案 0 :(得分:1)

使用此

$("#tableid").hover(function(){
    var getfirstchildTD = $(this).find("td :checkbox:nth-child(1)").attr("templateid");
    alert(getfirstchildTD);
})

答案 1 :(得分:1)

我真的没有得到你想要的东西,但我希望这就是你所需要的:

$(document).ready(function() {
    //when hover on checkbox
    $('tbody').on('mouseenter','input:checkbox',function() {
         //get templateid attribute value of the checkbox which is placed at first <td> in <tr> 
         var yea = $(this).closest('tr').find('td:first input:checkbox').attr('templateid');
         alert(yea);
    });
});

答案 2 :(得分:1)

这是有效的解决方案,请尝试一下

G → F
$("input").hover(function(){
    var getfirstchildTD = $(this).attr("templateid");
    alert(getfirstchildTD);
})

答案 3 :(得分:1)

您可以尝试jQuery :first-child

$("td:first-child input:first-child").hover(function(){
    var templateid = $(this).attr("templateid");
    //TODO your code
});

答案 4 :(得分:1)

$(document).ready(function() {
  console.log('hello');
$('#table tbody tr td:first-child').on('mouseover', function() {
    
    console.log($(this).find('input[type=checkbox]').attr('templateid'));
  })
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="table">
  <thead>
    <tr>
      <th>h1</th>
      <th>h2</th>
      <th>h3</th>
      <th>h4</th>
      <th>h5</th>
      <th>h5</th>
      <th>h7</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="form-group form-control" type="checkbox" templateid="1">something </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td><input class="form-group form-control" type="checkbox" templateid="2">something</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

相关问题