javascript - jQuery Ajax 在每次 TD 点击时显示值(value)

标签 javascript php jquery html ajax

我有一个小 table ,里面有 jQuery。
参见 Habs 列中的 TD 我想根据其 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>


gethabs.php

if($_POST['hab_name']){
 $hab_name = $_POST['hab_name'];
 echo $hab_name;
}

感谢您的帮助。

最佳答案

你没有发送值(value)!!!
编辑 ajax 请求,例如:

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

关于javascript - jQuery Ajax 在每次 TD 点击时显示值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29956132/

相关文章:

javascript - 这是 jquery data() 的可接受使用吗?

javascript - Highcharts 调整 y 轴以将 "100%"设置为自定义值的总和

javascript - 更改 Bootstrap 下拉列表时将发布数据发送到 Controller

php - 将 php 数据获取到命令行提示符

javascript - AJAX精简技巧?

javascript - 同位素 : jQuery not a function error using either jQuery or $ in WordPress

javascript - High 图表格式化程序不适用于 Highchart API

javascript - 强制检查 dirtyforms.js

javascript - 观察 $route.params.slug 不会触发 vuejs

php - Laravel-eloquent:调用未定义的方法 Illuminate\Database\Eloquent\Collection::where()