JavaScript에서 HTML 테이블 본문에 행을 삽입하는 방법

133

머리글과 바닥 글이있는 HTML 테이블이 있습니다.

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

tbody다음과 같이 행을 추가하려고합니다 .

myTable.insertRow(myTable.rows.length - 1);

그러나 행이 tfoot섹션에 추가됩니다 .

어떻게 삽입 tbody합니까?

— 제롬 베르 스트리에
소스

튜토리얼 w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

— Pandiyan Cool

215

에 행을 추가하려면 해당 행을 tbody참조하여 추가하십시오.

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow();

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);

// Append a text node to the cell
var newText  = document.createTextNode('New row');
newCell.appendChild(newText);

실무 데모가 여기 있습니다 . 또한 insertRow 여기 에서 설명서를 확인할 수 있습니다 .

— 조나단 나긴
소스

3

내 코드는 다음 이유로 인해 중단됩니다. null의 'insertRow'속성을 읽을 수 없습니다. 어떤 제안?

— Vrankela

1

@Vrankela : 선택기가 잘못되었을 수 있습니다 (예 : 첫 번째 줄).

— Christian Strempfer

2

위의 내용은 처음에는 실패합니다. 대신 행이 없는지 확인하십시오. var rows = tableRef.rows; var rowsSoFar = (행 == null)? 0 : rows.length; var newRow = tableRef.insertRow (rowsSoFar);

— inor

감사합니다 Jonathan, 텍스트 노트에 CSS 스타일을 추가하는 방법은 무엇입니까?

— Nguyễn Thắng

2

대신 테이블 끝에 행을 삽입 tableRef.insertRow(tableRef.rows.length);하기 tableRef.insertRow(-1);위해 간단하게 사용할 수 있습니다 .

— jeanggi90 2014 년

32

jQuery를 사용하여 다음 스 니펫을 시도 할 수 있습니다 .

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");

— 사시 다란
소스

22

어쩌면 당신은 맞지만 때로는 당신은 실제 물건을 알아야합니다 :) 그리고 내가 말한 것처럼 항상 하드 느낌의 시체를 사용하지 않고 라이브러리를 사용하기 전에 JavaScript를 알고 있습니다.)

— Marwan

그래, 'tbody'에서 쉼표를 잊지 마세요! $(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );

— Heitor

귀하의 답변을 제 사건에 적용하려고했으나 할 수 없어서 새 질문을 게시했습니다. 답변을해서 저를 구할 수 있다고 생각하십니까? ► stackoverflow.com/q/63194846/3298930 .

— Jose Manuel Abarca Rodríguez

13

기본 접근 방식 :

HTML 형식의 내용이 추가되고 새로 추가 된 행이 표시됩니다.

var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

— 쿠 쿨라
소스

2

내가 가장 좋아하는 솔루션 : 매우 우아하고 내부 HTML을 추가 할 수있는 유연성이 추가되었습니다.

— jimiayler

9

당신은 가까이 있습니다. tbody대신에 행을 추가하십시오 table.

myTbody.insertRow();

사용하기 전에 tBody( myTbody)에 대한 참조를 얻으십시오 . 테이블의 마지막 위치를 전달할 필요는 없습니다. 인수를 생략하면 자동으로 끝에 배치됩니다.

라이브 데모는 jsFiddle에 있습니다.

— 티무
소스

6

이 스크립트가 정확히 필요한 것 같아요

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)

— 마르 완
소스

물론 당신은 당신의 새로운 행을 수정해야하지만 난 그냥 답변에 개념을 제공하고 나머지는 당신에게 떠났다 :)

— Marwan

4

행 추가 :

<html>
    <script>
        function addRow() {
            var table = document.getElementById('myTable');
            //var row = document.getElementById("myTable");
            var x = table.insertRow(0);
            var e = table.rows.length-1;
            var l = table.rows[e].cells.length;
            //x.innerHTML = "&nbsp;";

            for (var c=0, m=l; c < m; c++) {
                table.rows[0].insertCell(c);
                table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function addColumn() {
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function deleteRow() {
            document.getElementById("myTable").deleteRow(0);
        }

        function deleteColumn() {
            // var row = document.getElementById("myRow");
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].deleteCell(0); // var table handle
            }
        }
    </script>

    <body>
        <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
        <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
        <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
        <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

        <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
            <tr id='myRow'>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

스 니펫 확장

그리고 세포.

— 포타 옵트
소스

7

예제를 만들 때 더 합리적인 변수를 사용해야한다고 생각합니다.

— Uriahs Victor

2

나는 이것을 시도했고 이것은 나를 위해 일하고있다 :

var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);

— 판 디얀 쿨
소스

2

바닥 글에 2 행이있는 경우 어떻게해야합니까?

— Jérôme Verstrynge

1

간단하게 var row = table.insertRow (0); 그것은 상단에 행을 추가합니다

— Pandiyan Cool

@JVerstry tbody : 이것은 정확히 mozilla

— e2-e4

1

다음 예제를 사용할 수 있습니다.

<table id="purches">
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaction Date</th>
            <th>Category</th>
            <th>Transaction Amount</th>
            <th>Offer</th>
        </tr>
    </thead>

    <!--  <tr th:each="person: ${list}"    >
            <td><li th:each="person: ${list}" th:text="|${person.description}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.price}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.available}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.from}|"></li></td>
            </tr>
    -->

    <tbody id="feedback">
    </tbody>
</table>

자바 스크립트 파일 :

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
        //  var json = "<h4>Ajax Response</h4><pre>"  + JSON.stringify(data, null, 4) + "</pre>";
        // $('#feedback').html(json);
        //
        console.log("SUCCESS: ", data);
        //$("#btn-search").prop("disabled", false);

        for (var i = 0; i < data.length; i++) {
            //$("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td></tr>');
            $('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td></tr>');

            alert(data[i].accountNumber)
        }
    },
    error: function (e) {
        var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
        $('#feedback').html(json);

        console.log("ERROR: ", e);
        $("#btn-search").prop("disabled", false);
    }
});

— 바쿠 아 칸
소스

1

열 추가, 행 추가, 열 삭제 및 행 삭제.

가장 간단한 방법

function addColumn(myTable) {
    var table = document.getElementById(myTable);
    var row = table.getElementsByTagName('tr');
    for (i=0; i<row.length; i++) {
        row[i].innerHTML = row[i].innerHTML + '<td></td>';
    }
}

function deleterow(tblId)
{
      var table = document.getElementById(tblId);
      var row = table.getElementsByTagName('tr');
      if (row.length != '1') {
          row[row.length - 1].outerHTML = '';
      }
}

function deleteColumn(tblId)
{
    var allRows = document.getElementById(tblId).rows;
    for (var i=0; i<allRows.length; i++) {
        if (allRows[i].cells.length > 1) {
            allRows[i].deleteCell(-1);
        }
    }
}

function myFunction(myTable) {
    var table = document.getElementById(myTable);
    var row = table.getElementsByTagName('tr');
    var row = row[row.length-1].outerHTML;
    table.innerHTML = table.innerHTML + row;
    var row = table.getElementsByTagName('tr');
    var row = row[row.length-1].getElementsByTagName('td');
    for(i=0; i<row.length; i++) {
        row[i].innerHTML = '';
    }
}

table, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    cursor: text;
    padding: 10px;
}
td:empty:after {
    content: "Type here...";
    color: #CCCCCC;
}

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <form>
            <p>
            <input type="button" value="+Column" onclick="addColumn('tblSample')">
            <input type="button" value="-Column" onclick="deleteColumn('tblSample')">
            <input type="button" value="+Row" onclick="myFunction('tblSample')">
            <input type="button" value="-Row" onclick="deleterow('tblSample')">
            </p>
            <table><tbody id="tblSample" contenteditable><tr><td></td></tr></tbody></table>
        </form>
    </body>

</html>

스 니펫 확장

— 싯다르타 마하 토
소스