javascript - jquery对话框小部件不能与行表

javascript - jquery对话框小部件不能与行表,第1张

我有像图像bellow的表格,我从查询到数据库创建,每行都有我想要的按钮,当onclick将是提示对话框(我使用jquery对话框小部件) javascript - jquery对话框小部件不能与行表,image 1,第2张

这是我创建表格的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) javascript - jquery对话框小部件不能与行表,image 2,第3张

但为什么当我点击另一行中的加号按钮时没有出现对话框,页面只是重新加载而我的表格已经消失。我想在每次单击其中一个按钮时提示对话框。有什么帮助吗?

最佳答案:

1 个答案:

答案 0 :(得分:1)

使用重复标识符时会出现问题,标识符必须是唯一的。您可以添加常用的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
});
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复