jQuery로 테이블 행을 제거하는 가장 좋은 방법은 무엇입니까?
jQuery로 테이블 행을 제거하는 가장 좋은 방법은 무엇입니까?
네가 옳아:
$('#myTableRow').remove();
행에 다음 id과 같은 이 있으면 제대로 작동합니다 .
<tr id="myTableRow"><td>blah</td></tr>
이 없으면 idjQuery의 다양한 셀렉터를 사용할 수 있습니다 .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
테이블의 데이터 셀 안에 버튼 / 링크가 있다고 가정하면 이와 같은 방법으로 트릭을 수행 할 수 있습니다 ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
클릭 한 버튼 / 링크의 부모의 부모가 제거됩니다. 부모 ()는 일반적인 DOM 객체가 아닌 jQuery 객체이기 때문에 parent ()를 사용해야하며 버튼이 행 안에있는 데이터 셀 안에 있기 때문에 parent ()를 두 번 사용해야합니다. 당신이 제거하고 싶은 것. $ (this)는 버튼을 클릭 한 것이므로 다음과 같이하면 버튼 만 제거됩니다.
$(this).remove();
데이터 셀이 제거되는 동안 :
$(this).parent().remove();
행의 아무 곳이나 클릭하여 간단하게 제거하려면 다음과 같이하십시오. 이 메시지를 쉽게 수정하여 사용자에게 프롬프트하거나 두 번 클릭하여 작업 할 수 있습니다.
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
그것이 도움이 되길 바랍니다 ... 나는 이것에 조금 어려움을 겪었습니다.
당신이 사용할 수있는:
$($(this).closest("tr"))
요소의 부모 테이블 행을 찾는 데 사용됩니다.
부모 (). 부모 ()보다 우아합니다. 이것은 내가 시작한 일이며 곧 내 길의 오류를 배웠습니다.
-편집-누군가가 행을 제거하는 것에 대한 질문이라고 지적했습니다 ...
$($(this).closest("tr")).remove()
아래에서 지적했듯이 간단하게 수행 할 수 있습니다.
$(this).closest('tr').remove();
여러 요소에서 발생하는 이벤트와 같은 많은 작업에 유사한 코드 스 니펫을 사용할 수 있습니다.
쉬운 .. 이것을보십시오
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
다음이 허용됩니다.
$('#myTableRow').remove();
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
아마도 이런 식으로도 효과가 있습니까? 나는 "this"로 무언가를 시도하지 않았으므로 그것이 효과가 있는지 모르겠다.
테이블에서 테이블 행 ( <tr>) 태그를 제거하기 만하면됩니다. 예를 들어 다음은 테이블에서 마지막 행을 제거하는 코드입니다.
$('#myTable tr:last').remove();
* 위의 코드는 이 jQuery Howto post 에서 가져 왔습니다 .
크기에 이것을 시도하십시오
$(this).parents('tr').first().remove();
전체 목록 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
</script>
</head>
<body>
<table>
<tr><td>foo</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bar bar</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bazmati</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
</table>
</body>
</html>
또 다른 방법 empty():
$(this).closest('tr').empty();
삭제하려는 행이 변경 될 수있는 경우이를 사용할 수 있습니다. 삭제하려는 행 #에이 함수를 전달하십시오.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
$('tr').click(function()
{
$(this).remove();
});
나는 그것이 작동함에 따라 위의 코드를 시도 할 것이라고 생각하지만, 왜 그것이 왜 작동하는지 모르고 전체 테이블이 제거됩니다. 또한 행을 클릭하여 행을 제거하려고합니다. 정확한 답변을 찾을 수 없습니다.
이런 HTML이 있다면
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>
어디에 userid="123"테이블을 만들 때 동적으로 채울 수있는 맞춤 속성이 있습니다.
당신은 같은 것을 사용할 수 있습니다
$(".spanUser").live("click", function () {
var span = $(this);
var userid = $(this).attr('userid');
var currentURL = window.location.protocol + '//' + window.location.host;
var url = currentURL + "/Account/DeleteUser/" + userid;
$.post(url, function (data) {
if (data) {
var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW
} else {
alert('Sorry, there is some error.');
}
});
});
따라서이 경우 TR태그 의 클래스 나 ID를 모르지만 어쨌든 삭제할 수 있습니다.
나는 이것이 오래된 게시물이라는 것을 알고 있지만 똑같은 일을 찾고 있었고 받아 들인 대답이 나에게 도움이되지 않는다는 것을 알았습니다. 이것이 작성된 이후 JQuery가 계속 진행되었다고 가정하십시오.
어쨌든, 나는 다음이 나를 위해 일한다는 것을 알았다.
$('#resultstbl tr[id=nameoftr]').remove();
이것이 누군가에게 도움이되는지 확실하지 않습니다. 위의 예제는 더 큰 함수의 일부이므로 이벤트 리스너에 래핑하지 않았습니다.
부트 스트랩 테이블을 사용하는 경우
bootstrap_table.js에이 코드 스 니펫을 추가하십시오
BootstrapTable.prototype.removeRow = function (params) {
if (!params.hasOwnProperty('index')) {
return;
}
var len = this.options.data.length;
if ((params.index > len) || (params.index < 0)){
return;
}
this.options.data.splice(params.index, 1);
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initBody(true);
};
그런 다음 var allowedMethods = [
더하다 'removeRow'
마지막으로 당신은 사용할 수 있습니다 $("#your-table").bootstrapTable('removeRow',{index:1});
id는 좋은 선택자가 아닙니다. 행에 일부 속성을 정의 할 수 있습니다. 그리고 그것들을 선택 자로 사용할 수 있습니다.
<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>
func를 사용하여 다음과 같은 행을 선택할 수 있습니다 (ES6).
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');
참고 URL : https://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery
'Programing' 카테고리의 다른 글
| VS 2017에서 디버깅을 중지 할 때 브라우저 닫기를 자동으로 중지하는 방법 (0) | 2020.03.21 |
|---|---|
| JavaScript에서 싱글 톤을 구현하는 가장 간단하고 깔끔한 방법은 무엇입니까? (0) | 2020.03.21 |
| 개체가 약속인지 어떻게 알 수 있습니까? (0) | 2020.03.21 |
| System.out.println을 사용하여 콘솔에서 색상을 인쇄하는 방법은 무엇입니까? (0) | 2020.03.21 |
| 페이지와 목차를 만들기위한 마크 다운? (0) | 2020.03.21 |