如何在JQuery UI对话框中实现“确认”对话框？
我尝试使用JQuery UI对话框来replace丑陋的javascript:alert()框。 在我的场景中，我有一个项目列表，并在他们每个人旁边，我会有一个“删除”button为他们每个人。 psuedo的html设置将如下所示：
<ul> <li>ITEM <a href="url/to/remove"> <span>$itemId</span> <li>ITEM <a href="url/to/remove"><span>$itemId</span> <li>ITEM <a href="url/to/remove"><span>$itemId</span> </ul> <div id="confirmDialog">Are you sure?</div>
在JQ部分，在文档准备好的时候，我会首先将div设置为必要的button的modal dialog，并将这些“a”设置为在开始删除之前进行确认，如：
$("ul li a").click(function() { // Show the dialog return false; // to prevent the browser actually following the links! }
好的，这是问题所在。 在初始化期间，对话框将不知道谁（物品）会将其点燃，还有物品ID（！）。 我如何设置这些确认button的行为，如果用户仍然select是，它将按照链接将其删除？
我只是要解决同样的问题。 让这个工作起作用的关键是dialog必须在你想要使用确认function的链接的click事件处理程序中进行部分初始化（如果你想用这个链接来进行多个链接的话）。 这是因为链接的目标URL必须注入到事件处理程序中以确认button单击。 我用CSS类来表示哪个链接应该有确认行为。
这是我的解决scheme，抽象出适合于一个例子。
<div id="dialog" title="Confirmation Required"> Are you sure about this? </div> <script type="text/javascript"> $(document).ready(function() { $("#dialog").dialog({ autoOpen: false, modal: true }); }); $(".confirmLink").click(function(e) { e.preventDefault(); var targetUrl = $(this).attr("href"); $("#dialog").dialog({ buttons : { "Confirm" : function() { window.location.href = targetUrl; }, "Cancel" : function() { $(this).dialog("close"); } } }); $("#dialog").dialog("open"); }); </script> <a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a> <a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
我相信如果你可以用CSS类生成链接（在我的例子中是confirmLink ），这将对你confirmLink 。
这是一个jsfiddle中的代码。
为了充分披露，我会注意到我在这个问题上花了几分钟的时间，而且我也提供了类似的答案，当时也没有被接受的答案。
我发现保罗的答案并不像他设置选项的方式那样工作，因为在点击事件上实例化对话框是错误的。 这是我的代码正在工作。 我没有为保罗的榜样量身定做，但是这只是猫咪在一些元素方面的差异而命名不同。 你应该可以解决这个问题。 更正在click事件button的对话框选项的setter中。
$(document).ready(function() { $("#dialog").dialog({ modal: true, bgiframe: true, width: 500, height: 200, autoOpen: false }); $(".lb").click(function(e) { e.preventDefault(); var theHREF = $(this).attr("href"); $("#dialog").dialog('option', 'buttons', { "Confirm" : function() { window.location.href = theHREF; }, "Cancel" : function() { $(this).dialog("close"); } }); $("#dialog").dialog("open"); }); });
希望这可以帮助别人，因为这个post最初让我走上了正确的轨道，我想我最好发表更正。
我已经创build了一个我自己的函数jQuery的确认对话框。 这是代码
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) { $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({ draggable: false, modal: true, resizable: false, width: 'auto', title: dialogTitle || 'Confirm', minHeight: 75, buttons: { OK: function () { if (typeof (okFunc) == 'function') { setTimeout(okFunc, 50); } $(this).dialog('destroy'); }, Cancel: function () { if (typeof (cancelFunc) == 'function') { setTimeout(cancelFunc, 50); } $(this).dialog('destroy'); } } }); }
现在在你的代码中使用这个，只需写下面的代码
myConfirm('Do you want to delete this record ?', function () { alert('You clicked OK'); }, function () { alert('You clicked Cancel'); }, 'Confirm Delete' );
继续。
简单而短暂的解决scheme，我刚刚尝试，它的工作原理
$('.confirm').click(function() { $(this).removeClass('confirm'); $(this).text("Sure?"); $(this).unbind(); return false; });
那么只需添加类=“确认”您的链接，它的作品！
这是我的解决scheme..我希望它可以帮助任何人。 这是写在飞行而不是copypasted所以原谅我的任何错误。
$("#btn").on("click", function(ev){ ev.preventDefault(); dialog.dialog("open"); dialog.find(".btnConfirm").on("click", function(){ // trigger click under different namespace so // click handler will not be triggered but native // functionality is preserved $("#btn").trigger("click.confirmed"); } dialog.find(".btnCancel").on("click", function(){ dialog.dialog("close"); } });
我个人更喜欢这个解决scheme:)
编辑：对不起，我真的应该更详细地解释它。 我喜欢它，因为在我看来它是一个优雅的解决scheme。 当用户点击需要首先确认的button时，事件就会被取消。 当点击确认button时，解决scheme不是模拟链接点击，而是触发相同的本地jquery事件（单击）原始button，如果没有确认对话框，就会触发该button。 唯一的区别是不同的事件名称空间（在这种情况下“已确认”），以便确认对话框不再显示。 然后Jquery本地机制可以接pipe，事情可以按预期运行。 它的另一个好处是可以用于button和超链接。 我希望我已经清楚了。
我知道这是一个老问题，但这里是我在MVC4中使用HTML5 数据属性的解决scheme：
<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")"> Are you sure about this? </div>
JS代码：
$("#dialog").dialog({ modal: true, autoOpen: false, buttons: { "Confirm": function () { window.location.href = $(this).data('url'); }, "Cancel": function () { $(this).dialog("close"); } } }); $("#TheIdOfMyButton").click(function (e) { e.preventDefault(); $("#dialog").dialog("open"); });
这会做什么？
$("ul li a").click(function(e) { e.preventDefault(); $('#confirmDialog').show(); var delete_path = $(this).attr('href'); $('#confirmDialog a.ok').unbind('click'); // just in case the cancel link // is not the only way you can // close your dialog $('#confirmDialog a.ok').click(function(e) { e.preventDefault(); window.location.href = delete_path; }); }); $('#confirmDialog a.cancel').click(function(e) { e.preventDefault(); $('#confirmDialog').hide(); $('#confirmDialog a.ok').unbind('click'); });
如上。 以前的post让我走上正轨。 这是我做到的。 这个想法是在表中的每一行旁边都有一个图像（由数据库的PHP脚本生成）。 当一个图像被点击，用户将被redirect到URL，结果，相应的logging将被从数据库中删除，同时显示一些与jQuery UI对话框中点击logging相关的数据。
JavaScript代码：
$(document).ready(function () { $("#confirmDelete").dialog({ modal: true, bgiframe: true, autoOpen: false }); }); function confirmDelete(username, id) { var delUrl = "/users/delete/" + id; $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'"); $('#confirmDelete').dialog('option', 'buttons', { "No": function () { $(this).dialog("close"); }, "Yes": function () { window.location.href = delUrl; } }); $('#confirmDelete').dialog('open'); }
对话格：
<div id="confirmDelete" title="Delete User?"></div>
图片链接：
<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>
这样，您可以将PHP循环值传递到对话框中。 唯一的缺点是使用GET方法来实际执行操作。
这个怎么样：
$("ul li a").click(function() { el = $(this); $("#confirmDialog").dialog({ autoOpen: false, resizable:false, draggable:true, modal: true, buttons: { "Ok": function() { el.parent().remove(); $(this).dialog("close"); } } }); $("#confirmDialog").dialog("open"); return false; });
我已经在这个HTMLtesting它：
<ul> <li><a href="#">Hi 1</a></li> <li><a href="#">Hi 2</a></li> <li><a href="#">Hi 3</a></li> <li><a href="#">Hi 4</a></li> </ul>
它删除了整个li元素，你可以根据你的需要进行调整。
（截至2016年3月22日，页面上的下载链接不起作用，我将这个链接留在这里，以防开发者在某个时候修正它，因为它是一个很棒的小插件。替代scheme，和一个实际工作的链接： jquery.confirm 。）
这可能太简单了，但你可以试试这个jQuery确认插件 。 在很多情况下使用起来非常简单。
尽pipe我讨厌使用eval，但对于我来说这似乎是最简单的方式，而不会因为不同的情况而导致很多问题。 类似于javascript settimeout函数。
<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a> <div id="dialog-confirm" title="Confirm" style="display:none;"> <p>Are you sure you want to do this?</p> </div> <script> function confirm(callback){ $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: false, buttons: { "Ok": function() { $( this ).dialog( "close" ); eval(callback) }, Cancel: function() { $( this ).dialog( "close" ); return false; } } }); } function do_function(params){ console.log('approved'); } </script>
我自己遇到了这个问题，最终得到了一个解决scheme，这个解决scheme与这里的几个答案类似，但实现方式稍有不同。 我不喜欢很多的JavaScript，或占位符div的地方。 我想要一个通用的解决scheme，然后可以在HTML中使用，而不用为每个使用添加JavaScript。 这是我想出来的（这需要jQuery UI）：
使用Javascript：
$(function() { $("a.confirm").button().click(function(e) { e.preventDefault(); var target = $(this).attr("href"); var content = $(this).attr("title"); var title = $(this).attr("alt"); $('<div>' + content + '</div>'). dialog({ draggable: false, modal: true, resizable: false, width: 'auto', title: title, buttons: { "Confirm": function() { window.location.href = target; }, "Cancel": function() { $(this).dialog("close"); } } }); }); });
然后在HTML中，不需要javascript调用或引用：
<a href="http://www.google.com/" class="confirm" alt="Confirm test" title="Are you sure?">Test</a>
由于title属性用于div内容，用户甚至可以通过将鼠标hover在button上来获得确认问题（这就是为什么我没有使用tile的title属性）。 确认窗口的标题是alt标签的内容。 JavaScript的剪辑可以包含在一个广义的.js包括，只要通过应用一个类，你有一个漂亮的确认窗口。
$("ul li a").live('click', function (e) { e.preventDefault(); $('<div></div>').appendTo('body') .html('<div><h6>Are you sure about this?</h6></div>') .dialog({ modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true, width: 'auto', modal: true, resizable: false, buttons: { Confirm: function () { // $(obj).removeAttr('onclick'); // $(obj).parents('.Parent').remove(); $(this).dialog("close"); window.location.reload(); }, No: function () { $(this).dialog("close"); } }, Cancel: function (event, ui) { $(this).remove(); } }); return false; });
注意：没有足够的代表评论，但BineG的答案完美解决ASPX页面的回传问题，由荷马和回声突出显示。 为了荣誉，这是一个使用dynamic对话框的变体。
$('#submit-button').bind('click', function(ev) { var $btn = $(this); ev.preventDefault(); $("<div />").html("Are you sure?").dialog({ modal: true, title: "Confirmation", buttons: [{ text: "Ok", click: function() { $btn.trigger("click.confirmed"); $(this).dialog("close"); } }, { text: "Cancel", click: function() { $(this).dialog("close"); } }] }).show(); });
简单的方法与一点点的JavaScript
$("#myButton").click(function(event) { var cont = confirm('Continue?'); if(cont) { // do stuff here if OK was clicked return true; } // If cancel was clicked button execution will be halted. event.preventDefault(); }
上面的另一种变体，它检查控件是否是一个“asp：linkbutton”或“asp：button”，它呈现为两个不同的html控件。 似乎工作得很好，但没有广泛的testing。
$(document).on("click", ".confirm", function (e) { e.preventDefault(); var btn = $(this); $("#dialog").dialog('option', 'buttons', { "Confirm": function () { if (btn.is("input")) { var name = btn.attr("name"); __doPostBack(name, '') } else { var href = btn.attr("href"); window.location.href = href; } $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } }); $("#dialog").dialog("open"); });
我正在寻找这个在ASP.NET Gridview中的链接button上使用（GridView控件在命令中构build）因此，对话框中的“确认”操作需要在运行时激活由Gridview控件生成的脚本。 这对我工作：
$(".DeleteBtnClass").click(function (e) { e.preventDefault(); var inlineFunction = $(this).attr("href") + ";"; $("#dialog").dialog({ buttons: { "Yes": function () { eval(inlineFunction); // eval() can be harmful! }, "No": function () { $(this).dialog("close"); } } }); });
我知道这个问题是旧的，但这是我第一次使用确认对话框。 我认为这是最简单的方法。
$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger var conBox = confirm("Are you sure ?"); if(conBox){ // Do what you have to do } else return; });
我希望你喜欢它 ：）
我个人认为这是许多ASP.Net MVC应用程序的许多视图中经常性的要求。
这就是为什么我定义了一个模型类和一个局部视图：
using Resources; namespace YourNamespace.Models { public class SyConfirmationDialogModel { public SyConfirmationDialogModel() { this.DialogId = "dlgconfirm"; this.DialogTitle = Global.LblTitleConfirm; this.UrlAttribute = "href"; this.ButtonConfirmText = Global.LblButtonConfirm; this.ButtonCancelText = Global.LblButtonCancel; } public string DialogId { get; set; } public string DialogTitle { get; set; } public string DialogMessage { get; set; } public string JQueryClickSelector { get; set; } public string UrlAttribute { get; set; } public string ButtonConfirmText { get; set; } public string ButtonCancelText { get; set; } } }
而我的部分观点：
@using YourNamespace.Models; @model SyConfirmationDialogModel <div id="@Model.DialogId" title="@Model.DialogTitle"> @Model.DialogMessage </div> <script type="text/javascript"> $(function() { $("#@Model.DialogId").dialog({ autoOpen: false, modal: true }); $("@Model.JQueryClickSelector").click(function (e) { e.preventDefault(); var sTargetUrl = $(this).attr("@Model.UrlAttribute"); $("#@Model.DialogId").dialog({ buttons: { "@Model.ButtonConfirmText": function () { window.location.href = sTargetUrl; }, "@Model.ButtonCancelText": function () { $(this).dialog("close"); } } }); $("#@Model.DialogId").dialog("open"); }); }); </script>
然后，每次在视图中需要它时，只需使用@ Html.Partial（在部分脚本中执行，以便定义JQuery）：
@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})
诀窍是指定将匹配需要确认对话框的元素的JQueryClickSelector。 在我的情况下，所有与类SyLinkDelete的锚，但它可以是一个标识符，不同的类等。对我来说，它是一个列表：
<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params"> <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0"> </a>
非常stream行的话题和谷歌发现这个“jquery对话框closures哪个事件被点击”查询。 我的解决scheme正确处理YES，NO，ESC_KEY，X事件。 我希望我的callback函数被调用，不pipe对话如何处理。
function dialog_YES_NO(sTitle, txt, fn) { $("#dialog-main").dialog({ title: sTitle, resizable: true, //height:140, modal: true, open: function() { $(this).data("retval", false); $(this).text(txt); }, close: function(evt) { var arg1 = $(this).data("retval")==true; setTimeout(function() { fn(arg1); }, 30); }, buttons: { "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); }, "No": function() { $(this).data("retval", false); $(this).dialog("close"); } } }); } - - - - dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) { alert("Dialog retval is " + status); });
将浏览器redirect到新的url或者在retval函数上执行其他操作很容易。
这里有很多很好的答案;）这是我的方法。 与eval（）的用法相似。
function functionExecutor(functionName, args){ functionName.apply(this, args); } function showConfirmationDialog(html, functionYes, fYesArgs){ $('#dialog').html(html); $('#dialog').dialog({ buttons : [ { text:'YES', click: function(){ functionExecutor(functionYes, fYesArgs); $(this).dialog("close"); }, class:'green' }, { text:'CANCEL', click: function() { $(this).dialog("close"); }, class:'red' } ] }); }
用法如下所示：
function myTestYesFunction(arg1, arg2){ alert("You clicked YES:"+arg1+arg2); } function toDoOrNotToDo(){ showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']); }
开箱即用的JQuery UI提供了这个解决scheme：
$( function() { $( "#dialog-confirm" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); } );
HTML
<div id="dialog-confirm" title="Empty the recycle bin?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"> </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> </div>
您可以通过为JQuery函数提供一个名称并将想要显示的文本/标题作为parameter passing来进一步对其进行自定义。
参考： https ： //jqueryui.com/dialog/#modal-confirmation
那么这是你的问题的答案…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Santa Luisa</TITLE> <style> body{margin:0;padding:0;background-color:#ffffff;} a:link {color:black;} a:visited {color:black;} a:hover {color:red;} a:active {color:red;} </style> </HEAD> <body> <link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css"> <script src="jquery-1.4.4.js"></script> <script src="external/jquery.bgiframe-2.1.2.js"></script> <script src="ui/jquery.ui.core.js"></script> <script src="ui/jquery.ui.widget.js"></script> <script src="ui/jquery.ui.mouse.js"></script> <script src="ui/jquery.ui.draggable.js"></script> <script src="ui/jquery.ui.position.js"></script> <script src="ui/jquery.ui.resizable.js"></script> <script src="ui/jquery.ui.dialog.js"></script> <link rel="stylesheet" href="demos.css"> <script> var lastdel; $(function() { $( "#dialog" ).dialog({ autoOpen: false,modal: true,closeOnEscape: true }); $(".confirmLink").click(function(e) { e.preventDefault(); var lastdel = $(this).attr("href"); }); $("#si").click( function() { $('#dialog').dialog('close'); window.location.href =lastdel; }); $("#no").click( function() { $('#dialog').dialog('close'); }); }); </script> <SCRIPT LANGUAGE="JavaScript"> <!-- var currentimgx; var cimgoverx=200-6; var cimgoutx=200; function overbx(obj){ color='#FF0000'; width='3px'; obj.style.borderTopWidth = width; obj.style.borderTopColor =color; obj.style.borderTopStyle ='solid'; obj.style.borderLeftWidth = width; obj.style.borderLeftColor =color; obj.style.borderLeftStyle ='solid'; obj.style.borderRightWidth = width; obj.style.borderRightColor =color; obj.style.borderRightStyle ='solid'; obj.style.borderBottomWidth = width; obj.style.borderBottomColor =color; obj.style.borderBottomStyle ='solid'; currentimgx.style.width=cimgoverx+"px"; currentimgx.style.height=cimgoverx+"px"; } function outbx(obj){ obj.style.borderTopWidth = '0px'; obj.style.borderLeftWidth = '0px'; obj.style.borderRightWidth = '0px'; obj.style.borderBottomWidth = '0px'; currentimgx.style.width=cimgoutx+"px"; currentimgx.style.height=cimgoutx+"px"; } function ifocusx(obj){ color='#FF0000'; width='3px'; obj.style.borderTopWidth = width; obj.style.borderTopColor =color; obj.style.borderTopStyle ='solid'; obj.style.borderLeftWidth = width; obj.style.borderLeftColor =color; obj.style.borderLeftStyle ='solid'; obj.style.borderRightWidth = width; obj.style.borderRightColor =color; obj.style.borderRightStyle ='solid'; obj.style.borderBottomWidth = width; obj.style.borderBottomColor =color; obj.style.borderBottomStyle ='solid'; } function iblurx(obj){ color='#000000'; width='3px'; obj.style.borderTopWidth = width; obj.style.borderTopColor =color; obj.style.borderTopStyle ='solid'; obj.style.borderLeftWidth = width; obj.style.borderLeftColor =color; obj.style.borderLeftStyle ='solid'; obj.style.borderRightWidth = width; obj.style.borderRightColor =color; obj.style.borderRightStyle ='solid'; obj.style.borderBottomWidth = width; obj.style.borderBottomColor =color; obj.style.borderBottomStyle ='solid'; } function cimgx(obj){ currentimgx=obj; } function pause(millis){ var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < millis); } //--> </SCRIPT> <div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;"> <p><FONT COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p> <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p> </div> <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%"> <TR valign="top" align="center"> <TD> <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;"> 298 </font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas sadsadas </font> </FONT> </TD> </TR> <tr valign="top"> <td align="center"> <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH=""> <TR align="left"> <TD> <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH=""> <TR align="left"> <TD> <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD align="center">TESTO</TD><td> </td><td> </td></TR><TR align="center"><TD>12/22/2010 </TD><TD>298 </TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298" style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);" style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010 </TD><TD>298 </TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298" style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);" style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </td> </tr> </tbody></table> </body> </html>
确保你有jquery 1.4.4和jquery.ui
