我有如下图所示的表格,我从查询到数据库创建,每一行都有我想要的按钮,当 onclick 将是提示对话框时(我使用 jquery 对话框小部件)
这是我创建表的 php 代码
while ($fetch_dbsi_mhsw=mysql_fetch_array($query_dbsi_mhsw)) {
$no++;
echo" <tr>
<td>$no</td>
<td>$fetch_dbsi_mhsw[NIM]</td>
<td>$fetch_dbsi_mhsw[Name]</td>
<td style=\"text-align: center;\"><input name=\"bt_tambah_calon_wisudawan\" id=\"bt_tambah_calon_wisudawan\" type=\"image\" src=\"buttonTambah.png\" alt=\"Tambah\" align=\"middle\" width=\"20\" height=\"20\" /></td> </tr>";}
和我的 jquery 代码
$(document).ready(function(){
$("#bt_tambah_calon_wisudawan").click(function(){
var value1 = $(this).closest('tr').find('td:eq(1)').text();
var value2 = $(this).closest('tr').find('td:eq(2)').text();
// Here's the text of the dialog box
var dialog = $("<div style='display: none'><p>Anda akan menambahkan "+value1 + " " + value2 + " sebagai calon wisudawan?</p></div>").appendTo("body");
// This is the button on the form
var form = $("#form_tambah_cl_wisudawan")
// The form button was pressed - open the dialog
$(dialog).dialog(
{
title: "Konvirmasi Penambahan Data",
dialogClass: "no-close",
width: 600,
modal: true,
buttons: {
"Tambah": function () {
// This will invoke the form's action - putatively deleting the resources on the server
$(form).submit();
$(this).dialog("close");
},
"Cancel": function() {
// Don't invoke the action, just close the dialog
$(this).dialog("close");
}
}
});
return false;
});
});
我的问题是,当我单击第一行中的加号按钮时,会出现对话框(如图 2 所示)
但是为什么当我单击另一行中的加号按钮时,对话框没有出现,页面只是重新加载,我的表格就消失了。每当我单击其中一个加号按钮时,我想提示对话框。有什么帮助吗?
最佳答案
当您使用重复的标识符时就会出现问题,标识符必须是唯一的。您可以添加一个通用的CSS类,然后可以使用类选择器$('.className')
HTML(此处已简化)
<input class="bt_tambah_calon_wisudawan" />
脚本
$(".bt_tambah_calon_wisudawan").click(function(){
var tr = $(this).closest('tr'),
value1 = tr.find('td:eq(1)').text(),
value2 = tr.find('td:eq(2)').text();
//rest of code
});
关于javascript - jquery 对话框小部件不适用于行表中的 onclick 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31650937/