jQuery에 테이블 행을 추가하십시오
질문
jQuery에서 가장 좋은 방법은 마지막 행으로 테이블에 추가 행을 추가해야합니까?
이것은 받아 들일 수 있습니까?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
이와 같은 테이블에 추가 할 수있는 것에 대한 제한이 있습니까 (예 : 입력, 선택, 행 수)?
답변
당신이 제안하는 접근법은 당신이 찾고있는 결과를 줄 수있는 결과를 얻지 못합니다 - 예를 들어 tby가 있다면 무엇이 있었는지 :
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
다음과 같이 종료됩니다.
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
따라서 대신이 접근 방식을 권장합니다 :
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
위의 예제에 따라 여러 행을 포함하여 유효한 HTML이면 After () 메서드 내에 아무 것도 포함 할 수 있습니다.
업데이트 :이 질문을 통해 최근 활동을 수행 한 다음 답변을 다시 방문하십시오.눈꺼풀이없는 것은 항상 돔에 Tby가있을 것이라는 좋은 의견을 만듭니다.이것은 사실이지만 적어도 한 줄이있는 경우에만이 있습니다.행이 없으면 자신을 지정하지 않으면 아무도 없습니다.
Darkon_은 마지막 TR 후에 콘텐츠를 추가하는 것이 아니라 TBO를 추가하는 것이 좋습니다.이것은 행이없는 문제를 해결하지만 이론적으로 여러 TBDER 요소가 있고 각 행에 추가 될 수 있으므로 여전히 방탄이 아닙니다.
모든 것 무게를 무게는 모든 가능한 시나리오에 대해 설명하는 한 번 줄 솔루션이 있는지 모르겠습니다.jQuery 코드가 당신의 마크 업으로 수속 된지 확인해야합니다.
가장 안전한 해결책은 테이블이 항상 당신의 마크 업에 항상 하나 이상의 TB를 포함하는지, 행이없는 경우에도 테이블이 아마도 당신의 마크 업에서 적어도 하나의 tbody를 포함 할 것입니다.이로 인해 다음을 사용하여 여러 행을 사용하고 여러 행을 설명합니다.
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
답변
jQuery는 Fly에서 DOM 요소를 조작하는 기본 제공 기능을 가지고 있습니다.
다음과 같이 테이블에 아무 것도 추가 할 수 있습니다.
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
$ ( '<일부 태그>') jQuery에서의 일은 여기에 태그가있는 텍스트를 나타내는 텍스트와 텍스트를 설정하고 가져올 수있는 텍스트와 텍스트를 나타낼 수있는 태그 개체입니다.
이것은 몇 가지 꽤 이상한 들여 쓰기이지만이 예에서는 무슨 일이 일어나는지보기가 더 쉽습니다.
답변
@ Luke Bennett 가이 질문에 답변 한 이후로 일이 바뀌 었습니다.다음은 업데이트가 있습니다.
버전 1.4 (?)부터 삽입하려는 요소 (append (), prepend (), prepend (), prepend (), prepend (), prepend (), prepend (), prepend (), prepend () 또는 after () 메소드를 사용하여첫 번째
테이블에 있거나 새가없는 경우 새로운 에 랩핑하십시오.그래서 예 예시적인 코드는 허용되며 jQuery 1.4+로 잘 작동합니다.;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
답변
와 가 있다면 어떨까요?와 같은:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
그런 다음 신체가 아닌 바닥 글에 새 행을 삽입합니다.
따라서 최상의 해결책은
태그를 포함하고 .aptens보다는 .append를 사용하는 것입니다.$("#myTable > tbody").append("<tr><td>row content</td></tr>");
답변
jQuery 메소드를 요청한 것을 알고 있습니다.나는 다음과 같은 기능으로 JavaScript를 직접 사용하는 것보다 더 나은 방법으로 많은 것을 보았습니다.
tableObject.insertRow(index)
인덱스는 삽입 할 행의 위치를 지정하는 정수입니다 (0에서 시작).-1의 값을 사용할 수도 있습니다.이는 새로운 행이 마지막 위치에 삽입 될 것입니다.
이 매개 변수는 Firefox 및 Opera에서 필요하지만 Internet Explorer, Chrome 및 Safari에서는 선택 사항입니다.
이 매개 변수가 생략되면 Insertrow ()는 인터넷 익스플로러의 마지막 위치에 새 행을 삽입하고 Chrome 및 Safari의 첫 번째 위치에 새 행을 삽입합니다.
HTML 테이블의 모든 수용 가능한 구조에 대해 작동합니다.
다음 예제에서는 마지막으로 행을 삽입합니다 (-1은 색인으로 사용됨).
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
</body>
</html>
나는 그것이 도움이되기를 바랍니다.
답변
나는 추천한다
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
반대로
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
첫 번째 및 마지막 키워드는 시작할 첫 번째 또는 마지막 태그에서 작동하지 않고 닫히지 않습니다.따라서 중첩 된 테이블을 변경하지 않고 대신 전체 테이블에 추가하지 않으려면 중첩 테이블을 사용하여 더 멋지게 재생됩니다.적어도 이것은 내가 발견 한 것입니다.
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
최근댓글