在JQuery UI对话框中打开折叠的制表符表格

<button id="open-dialog">打开对话框</button>

$(document).ready(function() {
  $("#open-dialog").click(function() {
    // 创建对话框
    $("<div>").dialog({
      title: "折叠的制表符表格",
      width: 400,
      height: 300,
      modal: true,
      open: function() {
        // 在对话框中添加折叠的制表符表格
        var table = $("<table>").addClass("ui-widget ui-widget-content");
        var tbody = $("<tbody>");
        
        // 添加表头
        var thead = $("<thead>");
        var tr = $("<tr>");
        tr.append($("<th>").text("列1"));
        tr.append($("<th>").text("列2"));
        thead.append(tr);
        table.append(thead);
        
        // 添加表格内容
        for (var i = 1; i <= 5; i++) {
          var tr = $("<tr>");
          tr.append($("<td>").text("行" + i + "列1"));
          tr.append($("<td>").text("行" + i + "列2"));
          tbody.append(tr);
        }
        table.append(tbody);
        
        // 添加折叠效果
        table.find("tbody").hide();
        table.find("thead").click(function() {
          $(this).next("tbody").toggle();
        });
        
        // 将表格添加到对话框中
        $(this).append(table);
      },
      close: function() {
        // 销毁对话框
        $(this).dialog("destroy");
      }
    });
  });
});