如何在单击 HTML 表格单元格时打开 jQuery ui 对话框答案

【问题标题】：How to open a jQuery ui dialogue on clicking of HTML table cell如何在单击 HTML 表格单元格时打开 jQuery ui 对话框
【发布时间】：2018-01-16 03:32:30
【问题描述】：

我有一个 HTML 表格。现在根据我的要求，我想在单击表格单元格后立即打开一个 jQuery Ui 对话框..

这是我的 HTML 表格..

<table>
<thead>
    <tr>
        <th>Header Column</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
    </tr>
</thead>
<tbody>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
    <tr><th>Header</th><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr>
</tbody>
</table>

如何做到这一点？

【问题讨论】：

标签： jquery html ajax html-table

【解决方案1】：

试试这个：

$(function () {
    $('td').click(function () {
        var dialog = $('<p>This is the sample dialog</p>').dialog({
            buttons: {
                "Submit": function () {
                    //Your submit handler
                }
            },
            title:'Your title',
        });
    });
});

使按钮居中：

.ui-dialog-buttonpane ui-widget-content{
    text-align:center;
}
.ui-dialog-buttonset{
    float:none!important;
    text-align:center;
}

演示： http://jsfiddle.net/lotusgodkk/GCu2D/97/

【讨论】：

先生，我想在对话的中心只提供提交按钮
您可以从代码中删除剩余的按钮。只保留一个按钮并根据您的需要命名。
我做了，但提交按钮不在对话的中心
先生如何在对话中添加标题先生
参考这个链接：api.jqueryui.com/dialog 它有你想知道的所有对话选项。

【解决方案2】：

如果您的 html 中已经有表格

$('table tbody tr td').click(function() {

     // ur code for showing dialog here

});

如果你动态生成表格

你需要使用 on() 方法绑定事件

$('table tbody tr td').on('click', function() {

         // ur code for showing dialog here

});

或

$(document).on('click', 'table tbody tr td', function() {

         // ur code for showing dialog here

    });

'table tbody tr td' 可以是单元格的标识符。它也可以是单元格的任何类名

【讨论】：

【解决方案3】：

使用类来识别表格单元格：

<tbody>
    <tr><th>Header</th><td class="clickable">Cell 2</td><td class="clickable">Cell 3</td><td class="clickable">Cell 4</td></tr>
 <!-- the rest of your table -->
</tbody>

you may use a jquery class selector binding a click event like that:

$(".clickable").click(function(){
//put here the code for opening your dialogue
})

【讨论】：