我想要做的是记录在页面上动态创建的奖学金的记录号，并将结果发布到服务器而不刷新页面。它现在有效，但问题是它读取ID并且始终只返回列表中的第一个项＃。
列出每个奖学金的模式代码如下：
<!-- Trigger the modal with a button -->
<button type="button" onclick="saveData()" value="<? echo $row['id']; ?>"
id="savedata" class="btn btn-info btn-lg" class="saveData" data-
toggle="modal" data-target="#myModal<? echo $row['id']; ?>">More Information.
</button>
我没有包含模态的所有信息，但我很确定问题出在代码的按钮部分。
单击按钮时运行的代码的ajax部分是：
<script>
function saveData(){
var name=$('#savedata').val();
$.ajax({
type:"post",
url:"includes/post_scholarship_count.php",
data:'name='+name,
});
}
</script>
问题是当你点击任何奖学金时你获得了第一个奖学金价值，即使我可以看到该页面已经使每个奖学金都具有独特的价值。我的假设是，因为它的ID只能取第一个值。如何在ajax脚本中获取变量以从HTML CLASS而不是ID中读取？
我一直试图解决这个问题，所以任何帮助都会受到赞赏。
你有一个基本问题，如下。我假设你有很多奖学金，因此有很多按钮。 ID html属性仅用于命名页面中的唯一元素。如上所示，您正在引用：#savedata，它将始终仅引用单个元素。
所以，我的建议如下，它包括几个项目：
所以我们在这里解释一下
使用非阻碍javascript和类html属性来附加事件
而不是使用ID #saveData，只需使用'saveData'类属性并执行以下操作：
$(document).ready(function(evt){
$('.saveData').on('click', function(e){
var name = $(this).val();
$.ajax({
type:"post",
url:"includes/post_scholarship_count.php",
data:'name='+name,
});
});
});
此代码将使用类saveData获取所有按钮并附加一个事件来处理其单击。它会分别识别每个按钮。由于单个“点击监听器”附加到每个按钮，一旦您单击按钮，它将知道该怎么做。
您可以在纯Javascript中按类访问元素。
var name = document.getElementsByClassName("saveData");
但是你会得到一系列元素！也许您必须遍历此数组才能获得您的值。
嗨这里是一个使用PHP生成的表的方法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container" id="exampleDiv">
<?php
$arrayName =array(
array('Firstname' => 'Stan','Lastname' => 'Chacon', 'Middlename' => '', 'Nickname' => 'Zec' ),
array('Firstname' => 'Annie','Lastname' => 'Smith', 'Middlename' => 'Derav', 'Nickname' => 'AnnieDSmith' ),
array('Firstname' => 'Winnie','Lastname' => 'Pooh', 'Middlename' => '', 'Nickname' => 'WinnieTPooh' ),
);
//append an id to your table also a tbody
$html="<table id='exampleTable' class='table table-striped' ><tr><th style='border: 2px solid grey;'>Firstname</th>
<th style='border: 2px solid grey;'>Lastname</th>
<th style='border: 2px solid grey;'>Middlename</th>
<th style='border: 2px solid grey;'>Nickname</th>
<th style='border: 2px solid grey;'>Action</th></tr><tbody>";
foreach ($arrayName as $key => $value) {
if (isset($value)) {
$html.="<tr><td>{$value['Firstname']}</td><td>{$value['Lastname']}</td><td>{$value['Middlename']}</td><td>{$value['Nickname']}</td><td> <button type='button' name='buttonModal'>click me !</button></td></tr>";
}
}
$html.="</tbody></table>";
echo $html;
?>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#exampleTable tbody tr td button").on('click',function(){
var Firstname = $(this).closest('tr').children('td:first').text();
var Lastname = $(this).closest('tr').children('td:eq(1)').text();
var Middlename = $(this).closest('tr').children('td:eq(2)').text();
var Nickname = $(this).closest('tr').children('td:eq(3)').text();
if (Firstname != undefined && Lastname != undefined && Middlename != undefined && Nickname !=undefined) {
$('.modal-body').empty();
$("#myModal").modal();
$('.modal-body').append('<p>Hello '+Firstname+' '+ Lastname+' looks like the Nickname '+Nickname+' is already in use!! Pls try to use another one</p>')
}
})
</script>
</html>
希望能帮助到你 ！！