Javascript jqueryajax在每次TD单击时显示值_Javascript_Php_Jquery_Html_Ajax

Javascript jqueryajax在每次TD单击时显示值

javascript php jquery html ajax

Javascript jqueryajax在每次TD单击时显示值,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一张小桌子，里面有jQuery。我想知道See Habs列中的TDs是否能够根据其TD线显示每个值。在我的当前代码中，每个TD的按钮仍仅显示第一个TD的值，而在单击时不显示每个TD。以下是我的HTML代码： <!DOCTYPE html> <html lang="en"> <head> </head> <body> <table border="1px"> <thead> <tr>

我有一张小桌子，里面有jQuery。
我想知道See Habs列中的TDs是否能够根据其TD线显示每个值。

在我的当前代码中，每个TD的按钮仍仅显示第一个TD的值，而在单击时不显示每个TD。

以下是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="1px">
  <thead>
    <tr>
      <th>Habitation</th>
      <th>See Hab</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Human</td> 
      <td>        
        <input type="hidden" id="habs" name="hab_name" value="Human">
        <button class="check">Check</button>
      </td>
    </tr>
    <tr>
      <td>Animal</td> 
      <td>        
        <input type="hidden" id="habs" name="hab_name" value="Animal">
        <button class="check">Check</button>
      </td>
    </tr>
    <tr>
      <td>Forest</td> 
      <td>        
        <input type="hidden" id="habs" name="hab_name" value="Forest">
        <button class="check">Check</button>
      </td>
    </tr>
  </tbody>
</table>

<div id="resulthabs" style="background-color:#000000;color:#ffffff;"></div>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQuery(document).ready(function(){
  $('.check').click(function(){
    $.ajax({
      type: 'POST',
      url: 'gethabs.php',
      data: $('#habs'),
      success: function(data){
        $('#resulthabs').html(data);
      }
    });
  });
});
</script>
</body>
</html>

谢谢你的帮助。

你没有价值
编辑ajax请求，如：

$.ajax({
  type: 'POST',
  url: 'gethabs.php',
  data:'hab_name='+$(this).parent().find('input').val(),
  success: function(data){
    $('#resulthabs').html(data);
  }
});

好吧，这真是太好了，工作起来很轻松。非常感谢你。

$.ajax({
  type: 'POST',
  url: 'gethabs.php',
  data:'hab_name='+$(this).parent().find('input').val(),
  success: function(data){
    $('#resulthabs').html(data);
  }
});

 data: {hab_name : $(this).closest('td').find('#habs').val()},