Question

我手上的场景是我有一个PHP生成的表，从页面上显示的数据库中提取多行。每行都有一个唯一的ID。我希望能够添加编辑每一行的功能。

到目前为止，我正在使用对话框from this website创建弹出对话框，该对话框使用静态按钮（在动画示例中它的工作原理）。

简单地说，我希望能够单击行中的任何位置来触发对话框，并使用jQuery将唯一ID传递给PHP文件以生成对话框的内容。

到目前为止，我的目标是在对话框中显示内容。

<script>
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "fade",
                    duration: 100

                },
                hide: {
                    effect: "fade",
                    duration: 100
                }
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );

                var id = <somehow fetch the ID through a form or class within a span or somehow!>;
                var dataString = 'id=' + id;

                $.ajax({
                    type: "POST",
                    url: "edit.php",
                    data: dataString,
                    success: function(response) {
                        $('.ui-dialog-content').html(response);
                    }
                });
                return false;
            });
        });
    </script>

简单地总结我的问题，即使我添加<tr id="opener">...</tr>它仍然无法打开而另一个问题传递一个唯一ID（名为{{1}在PHP脚本中，通过打开对话框触发AJAX脚本中的每一行。

提前致谢！

编辑：可能值得注意的是，我对javascript / jQuery知之甚少，所以请用最简单的术语解释与之相关的任何内容，并提供给出的示例！：）

Answer 1

假设您的页面上有以下html表：

<table id="opener">
    <tr id="row1">
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr id="row2">
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
</table>

您可以使用以下内容收听任何行上的点击事件：

$( "#opener" ).on("click", "tr", function() {
    var id = $(this).attr('id');
    var dataString = 'id=' + id;

    alert(id);
});

在这种情况下，“tr”元素上的任何点击事件都会冒泡到id为“opener”的表格。在事件处理程序中，这将引用被单击的元素，以便您可以获取行的ID。请注意，您也可以使用.click事件，但是在创建.click事件时，表必须存在于DOM中。如果在连接事件后生成表格，则使用上述方法也可以使用。

此外，在对PHP页面进行AJAX调用时，我会使用以下内容：

$.ajax({
    url: edit.php,
    type: "POST",
    data: {
        id: id
    },
    success: function(response) {
        $('.ui-dialog-content').html(response);
    }
});

然后在PHP中，你应该能够使用：

访问id

$rowid = null;
if(isset($_POST["id"])) {
    $rowid = $_POST["id"];
}

Answer 2

您可以在标签中使用自定义数据属性来存储您需要的任何信息：

<tr class="row" data-id="1" data-type="widget" data-company="acme">
  <td>...</td>
</tr>

和相应的javascript：

$(document).ready(function() {
  $('.row').click(function() {
    var id = $(this).attr('data-id');
    console.log(id); // print the ID to the console
    // or send the ID to your php script (where you'll run 
    // int_val() to verify it's an integer!)
  });
});

解决了跨度/ ID问题。

我会通过上面的示例代码听取<tr>上的任何点击。给它一个类或给父包装器一个类，并听取.parent-class tr的点击。如果你需要，我可以修改这个更有用。

Answer 3

If you had this as html: <tr class="opener" id="phpid"><td>blah</td><td>blah</td></tr>

$('tr.opener td').click(function() {
    var phpid = $(this).parent(tr).attr(id);
    // do your ajax
    });

我没有在<tr>上放置点击功能的原因是因为有时它被<td>内部完全覆盖，并且它不会触发点击功能。

Answer 4

如果我没有错，你正在使用jQuery UI对话。它应该像你提到的那样工作。像这个HTML示例：

<tr class="opener" data-id="1">...</tr>
<tr class="opener" data-id="2">...</tr>
<tr class="opener" data-id="3">...</tr>

<div id="dialog_1" title="Dialog Title" style="display:none"> Some text</div>  
<div id="dialog_2" title="Dialog Title" style="display:none"> Some text</div>  
<div id="dialog_3" title="Dialog Title" style="display:none"> Some text</div>

以下是脚本示例：

<script>
    $(document).ready(function () {
        $('.opener').click(function () {
            var id = $(this).data('id');// here you get the unique id which you can use
            $('#dialog_'+id).dialog('open');
            return false;
        });
    });
</script>

Answer 5

检查.click和.bind之间的区别。

带有PHP输入的jQuery对话框窗口

5 个答案: