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

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

---

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

$(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); 

내가 언급하는 것을 잊은 것은이 코드가 작성되는 함수는 실제로 ajax 호출을위한 성공 콜백 함수입니다. 사용하여 테이블에 액세스 할 수 document.getElementById("tblEntAttributes")있지만 어떤 이유로 $(#tblEntAttributes)작동하지 않는 것 같습니다.

---

("#tblEntAttributes tbody")

될 필요가있다

$("#tblEntAttributes tbody").

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

다음은 둘 다의 예입니다.

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

과

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

작업 http://jsfiddle.net/xW4NZ/

---

이것을 사용하십시오

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

---

나는 이런 이상한 문제를 본 적이 없다! oO

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

이 이상한 문제가 왜 발생하는지 모르겠습니다!

---

@wirey가 말했듯 appendTo이 작동하지 않으면 다음을 시도해 볼 수 있습니다.

$("#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/

---

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