반응형
JavaScript에서 HTML 테이블 본문에 행을 삽입하는 방법
머리글과 바닥 글이있는 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합니까?
에 행을 추가하려면 해당 행을 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 여기 에서 설명서를 확인할 수 있습니다 .
Jquery를 사용하여 스 니펫을 따라갈 수 있습니다 .
$(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );
기본 접근법 :
HTML 형식의 컨텐츠를 추가하고 새로 추가 된 행을 표시해야합니다.
var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
가까이 있습니다. tbody대신에 행을 추가하십시오 table.
myTbody.insertRow();
사용하기 전에 tBody( myTbody)에 대한 참조를 얻으십시오 . 테이블의 마지막 위치를 전달할 필요가 없으며 인수를 생략 할 때 자동으로 끝에 위치합니다.
이 스크립트가 정확히 필요한 것 같아요
var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
행 추가
<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 = " ";
for (var c =0, m=l; c < m; c++) {
table.rows[0].insertCell(c);
table.rows[0].cells[c].innerHTML = " ";
}
}
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 = " " ;
}
}
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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>그리고 세포
나는 이것을 시도했다.
이것은 나를 위해 일하고있다
var table=document.getElementById("myTable");
var row=table.insertRow(myTable.rows.length-2);
var cell1=row.insertCell(0);
다음 예제를 사용할 수 있습니다
<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>
JS 파일 :
$.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);
}
});
열 추가, 행 추가, 열 삭제, 행 삭제. 가장 간단한 방법
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>이것이 테이블에 행을 추가하는 가장 좋은 방법이라고 생각합니다.
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
}
참고 URL : https://stackoverflow.com/questions/18333427/how-to-insert-row-in-html-table-body-in-javascript
반응형
'developer tip' 카테고리의 다른 글
| form.submit의 응답을 캡처하는 방법 (0) | 2020.07.30 |
|---|---|
| jQuery로 iframe의 콘텐츠에 액세스하는 방법은 무엇입니까? (0) | 2020.07.30 |
| Gridview가 THEAD를 렌더링하도록하려면 어떻게해야합니까? (0) | 2020.07.30 |
| Django 사이트에서 HTML을 PDF로 렌더링 (0) | 2020.07.30 |
| Mac OS X에서 Apache 2 사이트 파일 / 폴더에 대한 올바른 소유자 / 그룹 / 권한은 무엇입니까? (0) | 2020.07.30 |