Question

我有一个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>

如何实现这一目标？

Answer 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/

Answer 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

    });

＆＃39; table tbody tr td＆＃39;可以是单元格的标识符..它也可以是单元格的任何类名称

Answer 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
})

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

3 个答案: