Question

是否有任何Jquery插件可用于创建复杂的DOM struture ？

我想通过ajax响应创建HTML表。

表格单元格包含复选框，单选按钮链接html组件。

还希望处理事件，例如点击，onchanges在受尊重的组件上。

Answer 1

无论复杂程度如何，DOM结构都可以通过编程方式创建，也可以通过使用jQuery核心解析有效字符串来创建。我很好奇你需要多么复杂。我认为复杂性伴随着各种事件和行为的附加，而不是DOM本身。

更新：
哎呀，我花了几分钟时间通过我的手机浏览器发布上面的内容，同时更新了qn。如果您的DOM是以表为中心的，那么您可能需要考虑任何jQuery的扩展表格网格插件。进行搜索，你会发现一些流行且相当“复杂”的。

Answer 2

不，可能没有。

此外，你不需要一个插件来创建元素，如果你有一个相当复杂的结构，你可以简单地

$('<table><tbody><tr><td><label><input type="checkbox"> Check me</label></td><td class="clickable">Click me</td></tr></tbody></table>')
.find(".clickable")
  .click(function(){
    alert("Column got clicked");
  })
  .end()
.appendTo($("body"));

快乐的链接！

Answer 3

你应该研究jQuery 1.4，新的API使得创建新DOM变得如此简单，代码仍然是人类可读的

这是一个创建新动态行并将其添加到表中的简单示例。在行内，有几个表单元素，附加了事件。

jQuery("<tr />")
  .append(
    jQuery("<td />", {
      text: name
    })
  )
 .append(
    jQuery("<td />", {
      html: jQuery("<input />", {
              "type": "text",
              "name": "rule[properties][" + name + "]",
              val: value
            })
    })
  )
  .append(
    jQuery("<td />", {
      html: jQuery("<input />", {
              "type": "checkbox",
              "name": "rule[important][" + name + "]",
              "checked": isImportant
            })
    })
  )
  .append(
    jQuery("<td />", {
      "style": "text-align: right;",
      html: jQuery("<img />", {
              "src": "/buttons/pane_button_remove.png",
              click: function() { jQuery(this).closest("tr").remove(); }
            })
    })
  )
  .appendTo("table");

更多信息here

是否有任何Jquery插件用于创建复杂的DOM结构

3 个答案: