使用jQuery模板的動態表

我想用jQuery模板插件創建一個動態表。使用jQuery模板的動態表

我的要求是動態創建列，即有ColumnNames列表框...當項目被點擊時，它應該創建一個表與該列，當另一個項目被點擊時，它應該更新現有的模板，並添加第二個柱等...

我想用下面的代碼示例，但沒有運氣...

誰能告訴我，我該怎麼辦呢？

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     table 
     { 
      border-collapse: collapse; 
      margin: 8px; 
      background-color: #f8f8f8; 
      width:600px; 
      overflow:scroll; 
     } 
     table td 
     { 
      border: 1px solid blue; 
      padding: 3px; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" 
     type="text/javascript"></script> 
</head> 
<body> 
    <button id="showColBtn"> 
     CreateColumn</button><br /> 
    <table> 
     <thead> 
      <tr id="tblOrderReportHeaderRow"> 
      </tr> 
     </thead> 
     <tbody id="tblOrderReportBody"> 
     </tbody> 
    </table> 
    <script type="text/javascript"> 

     var markup = ""; 
     var arrTableHeader = []; 

     /* Render the Column Name template */ 
     $("#showColBtn").click(function() { 
      for (var i = 0; i <= 10; i++) { 
       markup += createHeaderMarkup(); 
       arrTableHeader.push(createHeader("Col" + i)); 
      } 
      /* Compile markup string as a named template */ 
      $.template("tblHeaderTemplate", markup); 

      $("#tblOrderReportHeaderRow").empty(); 
      $.tmpl("tblHeaderTemplate", arrTableHeader).appendTo("#tblOrderReportHeaderRow"); 
     }); 

     function createHeaderMarkup() { 
      return ("<th colspan='2'>${colName}</th>"); 

     } 

     function createHeader(colName) { 

      return ({ 'colName': colName }); 

     } 

    </script> 
</body> 
</html>

來源

2012-09-08 Nikhil Gupta

請在jsfiddle.net上創建原型。 – pixeline

下面是示例鏈接：http：//jsfiddle.net/UVtNw/ –

我已更新我的示例@ http://jsfiddle.net/UVtNw/2/ –

我解決了這個通過去除標記+ = createHeaderMarkup（）; from for循環

來源

2012-09-13 13:32:40

使用jQuery模板的動態表

回答

相關問題