jQuery를 사용하여 테이블의 tbody에 행 추가

Question

테이블의 tbody에 행을 추가하려고합니다. 그러나 나는 그것을 달성하는 데 문제가 있습니다. 첫째, HTML 페이지에서 드롭 다운 변경시 모든 것이 수행되는 함수가 호출됩니다. 나는 문자열을 만들었고 그 안에는 td이라는 HTML 요소, 텍스트 및 기타 내용이 포함되어 있습니다. 그러나 생성 된 행을 다음 테이블을 사용하여 테이블에 추가하려고 할 때 :

$(newRowContent).appendTo("#tblEntAttributes tbody"); 

나는 오류가 발생합니다. 테이블의 이름은 tblEntAttributes이고이를 tbody에 추가하려고합니다.

실제로 jQuery는 tblEntAttributes을 html 요소로 가져올 수 없습니다. 하지만 난 documemt.getElementById("tblEntAttributes");

테이블의 tbody에 행을 추가하여 이것을 달성 할 수있는 방법이 있습니까 액세스 할 수 있습니다. 어쩌면 바이 패스 또는 뭔가.

여기에 전체 코드입니다 : 내가 얘기를 깜빡 했네요

var newRowContent = "<tr><td><input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"></td><td>" + displayName + "</td><td>" + logicalName + "</td><td>" + dataType + "</td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>"; 

$("#tblEntAttributes tbody").append(newRowContent); 

한 가지 기록이 코드가 실제로 아약스 호출에 대한 성공 콜백 함수 인 기능입니다. document.getElementById("tblEntAttributes")을 사용하여 테이블에 액세스 할 수 있지만 어떤 이유로 $(#tblEntAttributes)이 작동하지 않는 것 같습니다.

Answer 1

! o.O

문제가 무엇인지 압니까? $는 작동하지 않습니다. 내가 jQuery("#tblEntAttributes tbody").append(newRowContent); 같은 jQuery와 같은 코드를 시도하고 매력처럼 작동합니다!

이상한 문제가 발생하는 이유를 알 수 없습니다.

Answer 2

("#tblEntAttributes tbody")

요구

($("#tblEntAttributes tbody")) 수 있습니다.

사용자가 정확한 구문 여기

와 소자 선택되지는의 예 모두

$(newRowContent).appendTo($("#tblEntAttributes")); 

및 @wirey가 appendTo 상기으로서 http://jsfiddle.net/xW4NZ/

Answer 3

작업

$("#tblEntAttributes tbody").append(newRowContent); 

우 uld가 작동하지 않으면 다음을 시도해보십시오.

$("#tblEntAttributes tbody").append(newRowContent); 

Answer 4

여기에 언급 된 html 드롭 다운을 사용하는 appendTo 버전이 있습니다. 그것은 "변경"에 다른 행을 삽입합니다.

함께 놀 수있는 예를 들어보십시오. 행운을 빌어 요!

내가 같이 같은 이상한 문제가 건너 적이없는 http://jsfiddle.net/xtHaF/12/

Answer 5

사용 Lodash은이

$("#tblEntAttributes tbody").append(newRowContent); 

Answer 6

템플릿을 만들 수 있으며이 방법으로 다음과 같은 것을 할 수 있습니다 : 여기를

 var count = 1; 
     window.addEventListener('load', function() { 
      var compiledRow = _.template("<tr><td><input type=\"checkbox\" id=\"<%= chkboxId %>\" value=\"<%= chkboxValue %>\"></td><td><%= displayName %></td><td><%= logicalName %></td><td><%= dataType %></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>"); 
      document.getElementById('test').addEventListener('click', function (e) { 
       var ajaxData = { 'chkboxId': 'chkboxId-' + count, 'chkboxValue': 'chkboxValue-' + count, 'displayName': 'displayName-' + count, 'logicalName': 'logicalName-' + count, 'dataType': 'dataType-' + count }; 
       var tableRowData = compiledRow(ajaxData); 
       $("#tblEntAttributes tbody").append(tableRowData); 
       count++; 
      }); 
     }); 

: 여기

<div class="container"> 
     <div class="row justify-content-center"> 
      <div class="col-12"> 
       <table id="tblEntAttributes" class="table"> 
        <tbody> 
         <tr> 
          <td> 
           chkboxId 
          </td> 
          <td> 
           chkboxValue 
          </td> 
          <td> 
           displayName 
          </td> 
          <td> 
           logicalName 
          </td> 
          <td> 
           dataType 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <button class="btn btn-primary" id="test">appendTo</button> 
      </div> 
     </div> 
    </div> 

그리고 것은 자바 스크립트 간다 에 있습니다 jsbin