Jquery 테이블의 기본 작업

巴扎黑
풀어 주다: 2017-06-26 14:35:02
원래의
1160명이 탐색했습니다.

Jquery는 HTML 테이블을 조작하는 데 매우 편리합니다. 다음은 테이블의 기본 작업을 간략하게 요약한 것입니다.

먼저 일반 테이블 CSS와 테이블을 만듭니다:

Jquery 테이블의 기본 작업
table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-right: auto;
    margin-left: auto;
    width: 800px;
 }
 th, td
 {
    border: 1px solid #b5d6e6;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    height: 20px;
 }
 th
 {
    background-color: Gray;
 }
로그인 후 복사
Jquery 테이블의 기본 작업
Jquery 테이블의 기본 작업
로그인 후 복사
                                                                                                                                                                                                                                                                                                                                                                                                                              
表头一表头二 表头三表头四表头五
第一行第一列第一行第二列第一行第三列第一行第四列第一行第五列
第二行第一列第二行第二列第二行第三列第二行第四列第二行第五列
第三行第一列第三行第二列第三行第三列第三行第四列第三行第五列
第四行第一列第四行第二列第四行第三列第四行第四列第四行第五列
Jquery 테이블의 기본 작업

1. 변경할 행으로 마우스를 이동하세요. 배경 색상:

CSS 스타일 추가:

.hover
{
  background-color: #cccc00;
}
로그인 후 복사

Js 스크립트:

Jquery 테이블의 기본 작업
$(document).ready(function () {
    //鼠标移动到行变色,单独建立css类hover
    //tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
    $("#table1 tr:gt(0)").hover(
    function () { $(this).addClass("hover") },
    function () { $(this).removeClass("hover") })
});
로그인 후 복사
Jquery 테이블의 기본 작업

결과 실행 결과:

2. 홀수 행과 짝수 행 테이블 변경 색상:

홀수 및 짝수 라인 CSS:

.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }
로그인 후 복사

Js 스크립트:

Jquery 테이블의 기본 작업
$(document).ready(function () {
    //奇偶行不同颜色
    $("#table2 tbody tr:odd").addClass("odd"),
    $("#table2 tbody tr:even").addClass("even")
    //或者
    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),
    //$("#table2 tbody tr:even").css("background-color", "#ffc")
});
로그인 후 복사
Jquery 테이블의 기본 작업

결과 표시:

3. 기본 작업:

(1) 테이블의 두 번째 행 삭제와 같은 행 삭제:

//删除指定行(第二行)
 $("#table3 tr:gt(0):eq(1)").remove();
로그인 후 복사

(2) 테이블의 두 번째 열 삭제와 같은 열 삭제:

//eq:获取子元素索引从 0 开始,先删除表头
$("#table3 tr th:eq(1)").remove();
//nth-child:获取子元素从 1 开始
$("#table3 tr td:nth-child(2)").remove();
로그인 후 복사

(3) 다른 행 삭제 , 두 번째 행을 제외한 모든 열 행:

 $("#table3 tr:gt(0):not(:eq(1))").remove();
로그인 후 복사

(4) 다른 열 삭제, 두 번째 열을 제외한 모든 열 삭제:

//先删除表头
$("#table3 tr th:not(:eq(1))").remove();
$("#table3 tr td:not(:nth-child(2))").remove();
로그인 후 복사

(5) 두 번째 행 숨기기 등 행 숨기기:

 $("#table3 tr:gt(0):eq(1)").hide();
//或者
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");
로그인 후 복사

(6) 두 번째 열 숨기기 등 열 숨기기:

Jquery 테이블의 기본 작업
 $("#table3 tr th:eq(1)").hide();
 $("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");
로그인 후 복사
Jquery 테이블의 기본 작업

(7) 테이블의 마지막 위치에 새 행 삽입:

var newRow = "<tr>
<td>新行第一列</td>
<td>新行第二列</td>
<td>新行第三列</td>
<td>新行第四列</td>
<td>新行第五列</td>
</tr>";
$("#table3 tr:last").after(newRow);
로그인 후 복사

(8) 두 번째 행에 행 삽입 행 뒤에 삽입:

var newRow = "<tr>
<td>新行第一列</td>
<td>新行第二列</td>
<td>新行第三列</td>
<td>新行第四列</td>
<td>新行第五列</td>
</tr>";
$("#table3 tr:gt(0):eq(1)").after(newRow);
로그인 후 복사

(9) 두 번째 행 및 세 번째 열과 같은 셀 값 가져오기:

var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();
//结果显示:第二行第三列
로그인 후 복사

(10) 모두 가져오기 두 번째 열과 같은 열의 값:

var v = "";
 $("#table3 tr td:nth-child(2)").each(function () {
        v += $(this).text()+" ";
});
//结果:第一行第二列  第二行第二列  第三行第二列
로그인 후 복사

(11) 두 번째 행과 같은 행의 모든 ​​값 가져오기:

 var v = "";
 $("#table3 tr:gt(0):eq(1) td").each(function () {
        v += $(this).text() + " ";
 });
//结果:第二行第一列  第二行第二列  第二行第三列  第二行第四列  第二行第五列
로그인 후 복사

(12) 행 셀 병합, 예를 들어 두 번째 행의 두 번째 및 세 번째 셀 병합:

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:gt(0):eq(1) td:eq(2)").remove();
로그인 후 복사

(13) 분할 분기 행 셀은 위의 병합된 셀을 복원합니다.

//注意不能使用
//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");
 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1);
 $("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")
로그인 후 복사

(14) 두 번째 셀을 병합하는 등 열 셀을 병합하고 두 번째 열의 세 번째 셀

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);
$("#table3 tr:gt(0):eq(2) td:eq(1)").remove();
로그인 후 복사

(15) 분할 위에서 방금 병합한 셀을 복원하는 것과 같이 셀을 열로 분할합니다.

 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);
//在下面行第一个单元格后插入单元格
 $("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");
로그인 후 복사

(16) 각 셀에 대한 클릭 이벤트를 추가하고 행을 팝업합니다. 셀의 인덱스 및 열 인덱스:

Jquery 테이블의 기본 작업
$(document).ready(function () {
    //点击#table3 的单元格返回 单元格索引
    $("#table3 td").click(function () {
        var tdSeq = $(this).parent().find("td").index($(this));
        var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
        alert("第" + (trSeq) + "行,第" + (tdSeq+1) + "列");
    })
});
로그인 후 복사
Jquery 테이블의 기본 작업

--= 소스 코드 다운로드=--

작성자: Rising Sun
출처:
본 글의 저작권은 작성자에게 있으며, 재인쇄는 환영하지만, 이 글은 작성자의 동의 없이 보관되어야 하며, 원문 링크는 반드시 남겨주셔야 합니다. 기사 페이지의 명백한 위치에 주어지지 않으면 당사는 이를 추구할 권리를 보유합니다. 법적 책임 권리

위 내용은 Jquery 테이블의 기본 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿