2011-03-23 4 views
0

동적으로 테이블을 만들고 동적으로 행을 추가하는 중입니다. 모두 Jquery를 통해 수행되며 동적으로 테이블을 만들지 만 괜찮지는 않습니다. 테이블에 행을 추가하면 내 코드가 어떻게 보이는지, onclick 이벤트 핸들러는 아무 것도하지 않고 어디에서 잘못 했습니까? 그러나, 내가 tableID를 하드 코드하면 다음과 같이 작동합니다 : $ ("# 1 tr : last"). after (newRow);JQuery를 사용하여 onclick 이벤트 핸들러를 통해 동적으로 생성 된 테이블에 행을 추가 할 수 없습니다.

시간을내어 주셔서 감사합니다.

$(document).ready(function() 
     {    
      var tableID = 1; 
      $('#btnAddSOWG').click(function(){createNewGroup(tableID++);}); 

      function createNewGroup(RecID) 
      {     
       var table  = document.createElement('table'); 
       table.id  = RecID; 
       var newRow  = table.insertRow(); 
       var oCell  = newRow.insertCell(); 
       oCell.innerHTML = "Work Group : <input type='text' name='t1'>";         

       var button  = document.createElement('input'); 
       button.type  = "button"; 
       button.id  = 'btn'+ RecID; 
       button.value = 'Add Work Item';     
       button.onclick = function(){createNewItem(RecID);} 

       oCell.appendChild(button); 

       $('body').append(table); 
      } 


      function createNewItem(tableID) 
      {         
       var selector = "#" +tableID; 
       var newRow= "<tr><td><input type='text' name='t1'><td></tr>"; 
       $(selector," tr:last").after(newRow); 

      } 
     }); 
    </script> 

HTML :

<body> 
    <input type=button id="btnAddSOWG" value="Add Group"> 
</body> 

답변

0

createNewItem 방법 안에 다음 하나를 시도해보십시오

$(selector+" tr:last").after(newRow); 

나는 ','가 '+'대신해야한다고 생각합니다.

+0

@Karthi, awesome! 이제 한 번 더 쿼리하면이 행을 동적으로 만들고 onblur 이벤트를 추가 할 수 있습니까? ""; – santosh

+0

테이블 행이 이미있는 경우 clone 메서드를 사용하여 동적으로 새 행을 쉽게 추가 할 수 있다고 가정합니다. '$ (selector + "tr : last") .clone (true) .insertAfter (selector + "tr : last");'. 블러를 추가하려면 – Karthik

+0

@ Karthi,이 줄 $ (selector + "tr : last") .clone (true) .insertAfter (selector + "tr : last "); createNewItem (tableID)이하는 기능을 수행 할 때 새로운 테이블을 동적으로 빌드합니다. – santosh

관련 문제