如果有多个记录，如何获取表中按钮的值
如果有多个记录，如何获取表中按钮的值
提问于 2016-09-20 13:53:35
以下是我在前端的代码：
<div class="panel panel-primary">
<div class="panel-heading text-center text-uppercase">Birth Certificates For Overall (Pending, Completed)</div>
<div class="panel-body">
<div class="box-body">
<table id="viewer" class="table table-bordered">
<thead>
<tr>
<th>Sr No</th>
<th>Reg Number</th>
<th>From Hospital</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php $Viewer->showAllData(); ?>
</tbody>
<tfoot>
<tr>
<th>Sr No</th>
<th>Reg Number</th>
<th>From Hospital</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>这是我的类代码，我在其中调用了对象：
public function showAllData()
{
$query = "SELECT * FROM certificate_details ORDER BY created DESC";
$connection = $this->establish_connection();
$details = $connection->query($query);
$connection->close();
if($details->num_rows > 0)
{
$counter = 1;
while($detail = $details->fetch_assoc())
{
$status = $detail['status'];
if($status == 0)
{
$bg = "bg-danger";
$issuestatus = "btn btn-success";
$message = "Confirm Issue!";
}
elseif($status == 1)
{
$bg = "bg-success";
$issuestatus = "btn btn-success disabled";
$message = "Certificate Issued";
}
else
{
$bg = "bg-warning";
$issuestatus = "btn btn-warning";
}
echo "
<tr class='odd gradeX ".$bg."'>
<td>".$counter."</td>
<td>".$detail['registration_number']."</td>
<td>".$this->getHospitalInfo($detail['user_id'])."</td>
<td style='margin: 0;'><div class='btn btn-primary' href='#' value='".$detail['id']."' id='view-details'>View Details</div><div style='margin-left: 10px;' class='".$issuestatus."' href='#' value='".$detail['id']."' id='confirm-issue'>".$message."</div></td>
</tr>
";
$counter = $counter + 1;
}
}
}我给按钮指定了一个特定的id，即id=“视图-详细信息”，并且在value部分中它保存了唯一的值。
这是下面的JQuery代码，每当我调用(“#view-details”).click(函数(){})时，就触发它
$("#view-details").click(function()
{
var certificateId = $("#view-details").attr('value');
$.ajax({
url: 'get_data.php?id=getCertificateDetails',
type: 'POST',
dataType: 'html',
data: {certificate_id : certificateId},
})
.done(function(resp)
{
var data = $.parseJSON(resp);
if(data.status == 1)
{
var message = "Certificate is Already Issued";
var btn_status = "btn btn-success disabled";
}
else if(data.status == 0)
{
var message = "Click To Confirm Issue!";
var btn_status = "btn btn-danger";
}
else
{
var message = "Technical Issue";
var btn_status = "btn btn-danger disabled";
}
var data = "<div class='modal-dialog'>"+
"<div class='modal-content'>"+
"<div class='modal-header' align='center'>"+
"<h3 class='modal-title'>Certificate Details Are As Follows</h3>"+
"</div>"+
"<div class='modal-body'>"+
"<b>Registration Number</b> : "+data.reg_number+
"<br /><b>Baby's Birth Date</b> : "+data.birth_date+
"<br /><b>Baby's Birth Time</b> : "+data.birth_time+
"<br /><b>Baby's Gender</b> : "+data.gender+
"<br /><b>Baby's Full Name</b> : "+data.baby_name+
"<br /><b>Father's Full Name</b> : "+data.fathers_name+
"<br /><b>Mother's Full Name</b> : "+data.mothers_name+
"<br /><b>Parent's Address While Baby's Birth</b> : "+data.while_baby_birth_parents_address+
"<br /><b>Parent's Permanent Address</b> : "+data.parents_permanent_address+
"<hr /><h4 class='text-center'>Hospital Details</h4>"+
data.hospital_detail+
"<hr /><h4 class='text-center'>Home Details</h4>"+
data.home_detail+
"<hr /><h4 class='text-center'>Other Details</h4>"+
data.other_detail+
"</div>"+
"<div class='modal-footer'>"+
"<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>"+
"<a href='#' class='"+btn_status+"' id='confirm-issue'>"+message+"</a>"+
"</div>"+
"</div>"+
"</div>";
$('#viewDetails').html(data);
$('#viewDetails').modal('show');
})
.fail(function()
{
console.log("error");
});
});当我们用一个场景来看这个屏幕截图时，问题就出现了。
当我单击第一个记录的视图详细信息时，将调用该模式，但当我单击下一个视图详细信息时，该模式将不会出现。似乎这种模式只出现在表中的第一项记录中。
请有人帮我处理这段代码。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-20 14:00:08
您正在使用相同的id (“view”)生成多个元素。这是无效的HTML。元素ID必须是唯一的。单击事件处理程序只适用于第一个事件处理程序，因为它认为后面的所有事件处理程序都无效。
使用类代替类(例如，$( "body" ).on( "click", ".view-details"...而不是$("#view-details").click(...和<div class='btn btn-primary view-details'...作为按钮(而不是id="view-details")
Stack Overflow用户
发布于 2016-09-20 14:06:34
#view-details id总是唯一的，所以您的模式将只在任何时候出现的第一次工作。
有关Difference between id and class in CSS and when to use it的更多详细信息
因此，您需要添加一个类来打开模型，并对代码进行一些更改。
HTML :
id='view-details'到<div class='btn btn-primary view-details'>
JS:
$( "body" ).on( "click", ".view-details", function() {
var certificateId = $( this ).attr('value');
// .... Rest of your code here
});为什么使用jQuery .on()，因为它会将单击处理程序绑定到每个包含view-details类的按钮上。
var certificateId = $( this ).attr('value');将给出当前单击按钮的属性值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39596018
复制相关文章
相似问题
腾讯云开发者
