집 >웹 프론트엔드 >프런트엔드 Q&A >자바스크립트로 테이블 스타일을 수정하는 방법

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

王林원래의: 2023-05-21 09:37:071485검색

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;는 데이터의 각 행 하단에 있는 테두리 두께가 1픽셀이고 색상이 밝은 회색임을 의미합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css padding border td tr th

성명：

이전 기사：DreamWeaver CSS 수정다음 기사：DreamWeaver CSS 수정