代码之家 › 专栏 › 技术社区 › spacemonkeys

带有事件的jQuery生成表

events html jquery

spacemonkeys · 技术社区 · 15 年前

我刚开始玩jQuery,想把ajax调用的结果放到表中。。。我已经编写了以下函数(用于测试而不是实际的)

 function AjaxSucceeded(result) {
           $("#pageLabel").html('');
           $("#pageLabel").append($("<table>").attr("id", "outputTable").append($('<tbody>')));

           $.each(result.d, function(i, item) {
               $("#outputTable").find('tbody')
                    .append($('<tr>')
                    .attr('onclick', "clientSideInclude('pageLabel','http://wwww.microsoft.com');")
           .append($('<td>')
           .attr('colspan', "2")
           .text(item.Description)
           )
           );

           });
           //** Clean up before we leave
           $('#loadDiv').removeClass('Loading').addClass('notLoading');
       };

产生以下输出

<tbody><tr onclick="clientSideInclude('pageLabel','http://wwww.microsoft.com')"><td colspan="2">Test Page                                                                                           </td></tr><tr onclick="clientSideInclude('pageLabel','http://wwww.microsoft.com')"><td colspan="2">Test Page 2                                                                                         </td></tr></tbody>

2 回复 | 直到 15 年前

andres descalzo 15 年前

试试这个:

function AjaxSucceeded(result) {

  $("#pageLabel").empty();

  var table = $('<table id="outputTable"><tbody></tbody></table>'),
      reftBody = $(table).find('tbody');

  $.each(result.d, function(i, item) {

      var 
          // td
          td = $('<td>')
                 .attr('colspan', "2")
                 .text(item.Description),
          // tr
          tr = $('<tr>')
                 .bind('click', {pageLabel: 'pageLabel', link: 'http://wwww.microsoft.com'}, function(event) {

                    clientSideInclude(event.data.pageLabel, event.data.link);

                 })
                 .append(td);     
      // append tr
      $(reftBody).append(tr);

   });

   // append table with tbody
   $("#pageLabel").append(table);

   //** Clean up before we leave
   $('#loadDiv').removeClass('Loading').addClass('notLoading');
};

Diodeus - James MacFarlane 15 年前

试试这个:

.append($('<tr onclick="...">')

同时,将HTML构建为一个字符串并同时插入整个内容也要高效得多。它大大减少了浏览器需要执行的重绘次数。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前