[英]Pop-up js dialog box onclick table row and display php information
我有一个PHP网站,显示MySQL数据库中的表信息。 我创建了一个js,该js将在单击行表时弹出。 问题在于它将仅在第一行上起作用,而其余部分则不起作用。 我还想显示捕获到的信息,该信息是从单击它的行显示到弹出/对话框中的。 谢谢!
这是我的桌子
<tr id="popup" style="cursor: pointer;">
<td hidden="text"><?php echo odbc_result($result,"OBGyneID"); ?></td>
<td><?php echo odbc_result($result,"Lname"); ?>
, <?php echo odbc_result($result,"Fname"); ?>
<?php echo odbc_result($result,"mi"); ?></td>
<td class="hidden-ob-xs"><?php echo odbc_result($result,"Bday");?></td>
<td class="hidden-ob-xs"><?php echo odbc_result($result,"pxAge"); ?></td>
<td class="hidden-ob-xs hidden-ob-sm"><?php echo odbc_result($result,"PhoneNum"); ?></td>
<td><?php echo odbc_result($result,"service"); ?></td>
<td class="hidden-ob-xs hidden-ob-sm"><?php echo odbc_result($result,"obgyneTime"); ?></td>
</tr>
这是我的JS
$('#popup').click(function(){
swal({
title: 'Are you sure you want to delete this record?',
text: 'You will not be able to recover this record again!',
type: 'warning',
showCancelButton: true,
buttonsStyling: false,
confirmButtonClass: 'btn btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonClass: 'btn btn-light',
background: 'rgba(0, 0, 0, 0.96)'
}).then(function(){
swal({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'success',
buttonsStyling: false,
confirmButtonClass: 'btn btn-light',
background: 'rgba(0, 0, 0, 0.96)'
});
});
});
我认为您正在尝试删除一条记录。 因此,以下代码可能有用。 您可能必须传递您的记录ID,以备将来删除。#id变量对于每一行都必须是唯一的。 试试下面的代码
的HTML
<tr onclick="myFunction( <?php print $recid; ?> )"> <tr>
JS
myFunction(recid){
swal({
title: "Are you sure you want to delete this record?",
text: "Once deleted, you will not be able to recover this record !",
icon: "warning",
buttons: true,
dangerMode: true,
closeOnClickOutside: false,
closeOnEsc: false
})
.then((willDelete) => {
if(willDelete) {
// Here make a POST request to delete your record using recid paramter
} else {
// do nothing
}
});
}
随时提出疑问。 如果有帮助,请对此答案进行投票/标记。
在TR标签上添加类
<tr class="popup" data-company="Google" style="cursor: pointer;">
更改此类以调用弹出窗口
$('.popup').click(function(){
var company = $(this).data('company');
/* your code */
});
检查以下代码。 希望对您有帮助。
$('.test').on('click', function(){ // this is your table id var dataId = $(this).attr('data-id'); swal({ title: 'Are you sure you want to delete this record?', text: 'You will not be able to recover this record again!', type: 'warning', showCancelButton: true, buttonsStyling: false, confirmButtonClass: 'btn btn-danger', confirmButtonText: 'Yes, delete it!', cancelButtonClass: 'btn btn-light', background: 'rgba(0, 0, 0, 0.96)' }).then(function(){ // Add your ajax code here swal({ title: 'Success', text: 'Record Deleted Suucessfully', type: 'success', buttonsStyling: false, confirmButtonClass: 'btn btn-light', background: 'rgba(0, 0, 0, 0.96)' }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> <table border="1"> <tr class="test" data-id="1"> <!-- Pass your table id into data-id --> <td>Testing</td> <td>Testing</td> <td>Testing</td> <td>Testing</td> <td>Testing</td> </tr> <tr class="test" data-id="2"> <td>Testing1</td> <td>Testing1</td> <td>Testing1</td> <td>Testing1</td> <td>Testing1</td> </tr> <tr class="test" data-id="3"> <td>Testing2</td> <td>Testing2</td> <td>Testing2</td> <td>Testing2</td> <td>Testing2</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.