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

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

에 행을 추가하려고 합니다.tbody탁자의하지만 저는 그것을 달성하는 데 문제가 있습니다.먼저 모든 것이 일어나는 함수는 html 페이지에서 드롭다운을 변경할 때 호출됩니다.제가 만든 것은.tr모든 것을 포함하는 문자열tdhtml 요소, 텍스트 및 기타 내용을 포함하는 내부.그러나 다음을 사용하여 생성된 행을 테이블에 추가하려고 할 때:

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

오류가 발생했습니다.테이블의 이름은.tblEntAttributes그리고 나는 그것을 추가하려고 노력하고 있습니다.tbody.

사실 지금 일어나고 있는 일은 jQuery가 그들을tblEntAttributeshtml 요소로서.하지만 저는 그것을 사용해서 접근할 수 있습니다.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)효과가 없는 것 같습니다.

("#tblEntAttributes tbody")

필요한

$("#tblEntAttributes tbody").

구문이 올바른 요소를 선택하지 않았습니다.

여기 두 가지 예가 있습니다.

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

그리고.

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

작동중인 http://jsfiddle.net/xW4NZ/

이것을 사용합니다.

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

나는 이런 이상한 문제를 처음 접해 봅니다.

무엇이 문제였는지 아십니까?$ 안 돼요.저는 jQuery와 같은 코드를 시도했습니다.jQuery("#tblEntAttributes tbody").append(newRowContent);매력적으로 느껴집니다.

왜 이런 이상한 문제가 생기는지 모르겠어요!

말씀하신 html 드롭다운을 사용한 appendTo 버전입니다."변경"에 다른 행을 삽입합니다.

$('#dropdown').on( 'change', function(e) {
    $('#table').append('<tr><td>COL1</td><td>COL2</td></tr>');
});

당신이 가지고 놀 수 있는 예와 함께.행운을 빌어요!

http://jsfiddle.net/xtHaF/12/

@wirey가 말했듯이appendTo작동해야 합니다. 작동하지 않을 경우 다음을 시도할 수 있습니다.

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

Lodash를 사용하면 템플릿을 만들 수 있으며 다음과 같은 방법으로 템플릿을 만들 수 있습니다.

    <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>

자바스크립트는 다음과 같습니다.

        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++;
            });
        });

여기 jsbin에 있습니다.

언급URL : https://stackoverflow.com/questions/10851527/adding-rows-to-tbody-of-a-table-using-jquery