자바스크립트로 테이블 스타일을 수정하는 방법-프런트엔드 Q&A-php.cn

자바스크립트로 테이블 스타일을 수정하는 방법

王林

풀어 주다： 2023-05-21 09:37:07

원래의

1462명이 탐색했습니다.

JavaScript는 웹 페이지에 대화형 기능과 동적 효과를 추가하는 데 사용되는 스크립팅 언어입니다. 웹 개발에서 테이블은 일반적으로 사용되는 요소 중 하나입니다. JavaScript를 사용하면 표의 스타일을 쉽게 수정하여 더 아름답고 읽기 쉽게 만들 수 있습니다.

1. 표에 스타일 추가

표 스타일 수정을 시작하기 전에 표에 스타일을 추가해야 합니다. CSS를 사용하여 테이블의 스타일을 정의한 다음 JavaScript를 사용하여 해당 스타일을 수정합니다. 다음 예에서는 테이블에 스타일을 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                text-align: left;
                padding: 8px;
                border-bottom: 1px solid #ddd;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2;
            }
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </table>

    </body>
</html>

로그인 후 복사

위 예에서는 다음 스타일을 정의했습니다.

border-collapse:collapse; 병합된 셀의 테두리를 나타냅니다. border-collapse: collapse; 表示合并单元格的边框。
width: 100%; 表示表格占用父容器的100%宽度。
th, td 表示表头与表数据的样式
text-align: left; 表示数据左对齐。
padding: 8px; 表示数据与边框的间距为8像素。
border-bottom: 1px solid #ddd; 表示每行数据底部的边框厚度为1像素，颜色为浅灰色。
tr:nth-child(even)

width: 100%;

th, td는 테이블 헤더 및 테이블 데이터의 스타일을 나타냅니다.

text-align: left;는 왼쪽 정렬 데이터를 나타냅니다.

padding: 8px;

border-bottom: 1px solid #ddd;

tr:nth-child(even)는 한 줄씩 걸러 배경색을 변경하는 것을 의미합니다.

2. JavaScript를 사용하여 테이블 스타일 수정

이제 테이블 스타일을 정의했으므로 다음 단계는 JavaScript를 사용하여 이러한 스타일을 수정하는 것입니다. 다음은 JavaScript를 사용하여 표 스타일을 변경하는 방법을 보여주는 몇 가지 예입니다.

document.getElementsByTagName("table")[0].style.backgroundColor = "#f9f9f9";

로그인 후 복사

이 예는 표의 배경색을 밝은 회색으로 변경합니다.

var th = document.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
    th[i].style.backgroundColor = "#ddd";
}

로그인 후 복사

이 예에서는 헤더의 배경색을 밝은 회색으로 변경합니다.

var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i++) {
    td[i].style.fontSize = "16px";
}

로그인 후 복사

이 예에서는 표에 있는 모든 셀의 글꼴 크기를 16픽셀로 변경합니다.

var tr = document.getElementsByTagName("tr");
for (var i = 1; i < tr.length; i += 2) {
    var td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
        td[j].style.color = "#999";
    }
}

로그인 후 복사

이 예에서는 테이블에 있는 모든 짝수 행의 글꼴 색상을 밝은 회색으로 변경합니다.

표의 첫 번째 열에 있는 셀의 테두리 스타일을 변경합니다.

var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i += 3) {
    td[i].style.borderRight = "1px solid #ddd";
}

로그인 후 복사

이 예에서는 표의 첫 번째 열에 있는 셀의 오른쪽 테두리를 1픽셀 밝은 회색 테두리로 변경합니다. 🎜🎜🎜테이블의 마지막 열 숨기기: 🎜🎜

var table = document.getElementsByTagName("table")[0];
var td = table.getElementsByTagName("td");
for (var i = td.length - 1; i >= 0; i--) {
    if ((i + 1) % 3 === 0) {
        td[i].parentNode.removeChild(td[i]);
    }
}

로그인 후 복사

🎜이 예에서는 테이블에서 셀의 마지막 열을 삭제합니다. 🎜🎜Summary🎜🎜이 기사에서는 JavaScript를 사용하여 표 스타일을 수정하는 방법을 배웠습니다. 이러한 기술을 사용하면 아름다운 테이블을 쉽게 만들고 수정할 수 있습니다. 필요에 따라 JavaScript를 사용하여 테이블에 동적 효과와 상호 작용을 추가할 수 있습니다. 이제 표 스타일을 수정하는 방법을 배웠으므로 JavaScript를 사용하여 표를 아름답게 만들어 보세요! 🎜

위 내용은 자바스크립트로 테이블 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!