Jquery 테이블의 기본 작업

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

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

작성자: Rising Sun

출처:

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

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