jQuery 템플릿을 사용하는 동적 테이블

jQuery 템플릿 플러그인을 사용하여 동적 테이블을 만들려고합니다.jQuery 템플릿을 사용하는 동적 테이블

내 요구 사항은 열이 동적으로 생성된다는 것입니다. 즉, ColumnNames가있는 ListBox가 있습니다 ... 항목을 클릭하면 열이있는 표가 만들어 져야하며 다른 항목을 클릭하면 기존 서식 파일이 업데이트되고 두 번째 항목이 추가되어야합니다 열 등등 ...

내가 다음 코드 샘플하지만 행운과 함께 노력하고 ...

사람이 내가 할 수있는 방법을 말해 줄래?

<!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(); for 루프

출처

2012-09-13 13:32:40

jQuery 템플릿을 사용하는 동적 테이블

답변

관련 문제