jQuery_jquery를 사용하여 테이블을 운영하는 일반적인 방법 및 기술 요약

다음은 jQuery에서 테이블을 조작하기 위해 일반적으로 사용하는 13가지 함수 목록입니다.

1. 마우스가 움직이면 행 색상이 변경됩니다

코드 복사 코드는 다음과 같습니다. 다음:

$('#table1 tr').hover(function(){
$(this).children('td').addClass('hover')
}, 함수 (){
$( this).children('td').removeClass('hover')
});

방법 2:

코드 복사 코드는 다음과 같습니다.

$("#table1 tr:gt(0)").hover(function() {
$(this).children(" td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover ");
});

2. 홀수행과 짝수행 색상 다름

코드 복사 코드는 다음과 같습니다. :

$('#table1 tbody tr:odd').css('배경색', '#bbf');
$('#table1 tbody tr:even').css( '배경색',' #ffc');
//작업 클래스
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass ("even");

3. 줄 숨기기

코드 복사 코드는 다음과 같습니다.

$('#table1 tbody tr:eq(3)').hide();
$("# table1 tr td::nth-child(3) ").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this). hide()});

4. 열 숨기기

코드 복사 코드는 다음과 같습니다.

$ ('#table1 tr td::nth-child(3)').hide();

5. 행

코드 복사 코드는 다음과 같습니다.

// 첫 번째 행을 제외한 모든 행을 삭제합니다. row
$('#table1 tr:not(:first)') .remove();
//지정된 행 삭제
$('#table1 tr:eq(3)').remove ();

6. 열 삭제

코드 복사 코드는 다음과 같습니다. 다음:

// 첫 번째 열을 제외한 모든 열 삭제
$ ('#table1 tr th:not(:nth-child(1))').remove();
$( '#table1 tr td:not(:nth-child(1))').remove( );
//첫 번째 열 삭제
$('#table1 tr td::nth-child(1) ').remove();

7. 특정 셀의 값 가져오기(설정)

코드 복사 코드는 다음과 같습니다.

// table1을 설정하고, 두 번째 tr의 첫 번째 td 값을 설정합니다.
$('#table1 tr:eq(1) td:nth-child(1)').html('value')
// 두 번째 tr 값의 첫 번째 td인 table1을 가져옵니다.
$('#table1 tr:eq(1) td:nth-child(1)').html();

8 행 삽입

코드 복사 코드는 다음과 같습니다.

// 두 번째 tr 뒤에 한 줄 삽입
$('< ;tr>삽입 3 삽입 삽입 삽입').insertAfter( $('#table7 tr:eq(1)'));

9. 각 행에 지정된 셀의 값을 가져옵니다

코드 복사 코드는 다음과 같습니다.

var arr = [];
$('#table1 tr td:nth-child(1) ').each (함수(키, 값) {
arr.push($(this).html());
});
var result = arr.join(',');

10. 모두 선택 또는 없음

코드 복사 코드는 다음과 같습니다.

//메서드 0:
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 현재 바인딩된 하위 선택 항목에 효과 추가
});

//방법 1:
//모두 선택하거나 모두 선택하지 않음 전달된 매개변수는 이벤트입니다. 예: checkAll(event)
function checkAll(evt){
evt=evt? evt: window.event;
var chall=evt.target?evt.target:evt.srcElement;
var tbl=$("#table1");
var trlist=tbl.find("tr ") ;
for(var i=1;i var tr=$(trlist[i]);
var input=tr.find("INPUT[type =' checkbox']");
input.attr("checked",chall.checked);
}
}
//방법 2:
//모두 선택 또는 없음 선택 전달된 매개변수는 다음과 같습니다: checkAll(this)
function checkAll(evt){
var tbl=$("#table1");
var trlist=tbl.find("tr") ;
for(var i=1;i var tr=$(trlist[i]);
var input=tr.find("INPUT[type=' checkbox ']");
input.attr("checked",evt.checked);
}
}
//방법 3:
//모두 선택 또는 없음 입력 매개변수 예를 들면 다음과 같습니다. checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function( i ){
$(this).attr("checked",evt.checked)
});
}
//방법 4:
//모두 선택 또는 없음 매개변수가 전달되었습니다. 예를 들면 다음과 같습니다: checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr( "checked ",evt.checked);
}

11. 클라이언트가 동적으로 행을 추가합니다

코드 복사 코드

function btnAddRow(){
//행 번호는 0부터 시작하고 마지막 행은 추가, 삭제, 저장 버튼이므로 2를 뺍니다
var rownum=$( "#table1 tr").length-2;
var chk="" ;
var text="";
var sel="< ;select id= 'sel_" rownum "'><<옵션 값='1'>남성<옵션 값='0'>여성";
var row="" chk "" text " " text "" text "";
$(row).insertAfter($("#table1 tr:eq(" rownum ") ") ;
코드는 다음과 같습니다.

한 번에 한 행만 삭제할 수 있습니다. 여러 행을 삭제하면 오류가 발생합니다. function btnDeleteRow(){
$("#table1 tr").find(" input[type='checkbox']").each(function(i){ if($(this).attr("checked")){

if(i!=0){//행 헤더를 삭제할 수 없음                                                          한 번에 여러 레코드를 삭제할 수 있습니다. function btnDeleteRow(){ $("#table1 tr").each( 기능(i) { var chk=$(this).find(" input[type='checkbox']"); if(chk.attr("id")!="checkall"){//제목 행을 삭제할 수 없습니다. if(chk.attr("checked") ; 🎜>

코드 복사


코드는 다음과 같습니다. 다음:

function btnSaveClick(){
//find() 메서드에 여러 필터 조건을 설정하는 방법을 몰라서 아래 선택 목록의 값을 가져올 수 없습니다
//$(" #table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this). val());
//}); ='text']").length>0){
               Alert($(this).find("input[type='text']"). val()); (this).find("select").length>0)
{
Alert($(this).find("select").val());
}
}) ;
}