Jquery 테이블의 기본 작업-JS 튜토리얼-php.cn

Jquery 테이블의 기본 작업

巴扎黑

풀어 주다： 2017-06-26 14:35:02

원래의

1166명이 탐색했습니다.

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

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

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;
 }

로그인 후 복사

表头一	表头二	表头三	表头四	表头五
第一行第一列	第一行第二列	第一行第三列	第一行第四列	第一行第五列
第二行第一列	第二行第二列	第二行第三列	第二行第四列	第二行第五列
第三行第一列	第三行第二列	第三行第三列	第三行第四列	第三行第五列
第四行第一列	第四行第二列	第四行第三列	第四行第四列	第四行第五列

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

CSS 스타일 추가:

.hover
{
  background-color: #cccc00;
}

로그인 후 복사

Js 스크립트:

$(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") })
});

로그인 후 복사

결과 실행 결과:

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

홀수 및 짝수 라인 CSS:

.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }

로그인 후 복사

Js 스크립트:

$(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")
});

로그인 후 복사

결과 표시:

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) 두 번째 열 숨기기 등 열 숨기기:

 $("#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", "");

로그인 후 복사

(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) 각 셀에 대한 클릭 이벤트를 추가하고 행을 팝업합니다. 셀의 인덱스 및 열 인덱스:

$(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) + "列");
    })
});

로그인 후 복사