使用jquery动态添加html元素答案

【问题标题】：dynamically add html element using jquery使用jquery动态添加html元素
【发布时间】：2009-12-23 00:56:03
【问题描述】：

根据 BlausC 对我之前的问题的回答，我现在可以在一定程度上使用 jquery。但现在我需要在 jquery 基于 servlet 的回发创建的表中添加一个复选框控件。我使用的代码是

 $("#linkInstr").click(function(){
   var arr=new Array();
   var cdid=$("#cboinstr option:selected");
    var code=$("#cbovendcode option:selected");
   $.get("trnDC?caseNo=21&insid="+cdid.text(),function(data){

      arr=data.split(",");
      var tbl= $("#tblDetails");
      $('<tr>').appendTo(tbl).append($('<td>'))
      .append($('<td>').text(code.val()))
      .append($('<td>').text(cdid.text()))
      .append($('<td>').text(arr[0]))
      .append($('<td>').text(arr[1]))
      .append($('<td>').text(arr[2]))
      ;

   })

})

任何帮助将不胜感激

【问题讨论】：

checkbok 将位于 tbl 的第一个 td

标签： jquery-selectors

【解决方案1】：

这是一种更好的方法，包括复选框并且效率更高。

 $("#linkInstr").click(function(){

   var arr=new Array();
   var contents;

   var cdid=$("#cboinstr option:selected");
   var code=$("#cbovendcode option:selected");

   $.get("trnDC?caseNo=21&insid="+cdid.text(),function(data){
      arr=data.split(",");
      contents = '<tr><td><input type="checkbox" /></td><td>' + cdid.text() + '</td><td>' + arr[0] + '</td><td>' + arr[1] + '</td><td>' + arr[2] + '</td></tr>';

      $("#tblDetails").append(content);
   });
});

【讨论】：

感谢 Ariel，这很有效，同时也感谢 alex 和 Vig 的努力。很快我也会发布我的下一个问题:-)

【解决方案2】：

只需在需要的地方添加复选框的标记即可。请注意，这样调用 append 是不必要的，请查看此帖子以获取更多信息：43,439 reasons to use append() correctly

【讨论】：

很棒的文章。感谢分享！

【解决方案3】：

我找到了一个很好的教程，其中用户展示了一些可以玩的 JQuery 插件。虽然这不是帮助您学习 JQuery 的基本教程。但是您可以在 Web 项目中重用已经开发的代码。见链接techcubetalk

【讨论】：