집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 테이블의 기본 동작에 대한 자세한 설명

jQuery 테이블의 기본 동작에 대한 자세한 설명

小云云원래의: 2018-01-22 16:58:533183검색

본 글은 주로 jQuery 테이블(Table)의 기본 동작을 소개하고, 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;
 }

<table>
    <tr>
      <th style="width: 160px;">表头一</th>
      <th style="width: 160px;">表头二 </th>
      <th style="width: 160px;">表头三</th>
      <th style="width: 160px;">表头四</th>
      <th style="width: 160px;">表头五</th>
    </tr>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
      <td>第一行第三列</td>
      <td>第一行第四列</td>
      <td>第一行第五列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
      <td>第二行第三列</td>
      <td>第二行第四列</td>
      <td>第二行第五列</td>
    </tr>
    <tr>
      <td>第三行第一列</td>
      <td>第三行第二列</td>
      <td>第三行第三列</td>
      <td>第三行第四列</td>
      <td>第三行第五列</td>
    </tr>
    <tr>
      <td>第四行第一列</td>
      <td>第四行第二列</td>
      <td>第四行第三列</td>
      <td>第四行第四列</td>
      <td>第四行第五列</td>
    </tr>
</table>

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

J 스크립트:

$(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 style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:last").after(newRow);

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

var newRow = "<tr style=\"background:red;\"><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) + "列");
  })
});

jQuery 테이블의 기본 동작에 대한 자세한 설명

관련 기사