[JavaScript] table에서 내용을 title 속성에 자동으로 추가

table 태그 내 td 안의 내용을 td의 title 속성에 자동으로 추가하여 툴팁(tooltip)으로 보여주는 방법

 

[html]

 

<table>

    <thead>

        <tr>

                <th>header</th>

                <th>header</th>

                <th>header</th>

                <th>header</th>

        </tr>

    </thead>

    <tbody>

        <tr>

                <td>content 1</td>

                <td>content 2</td>

                <td>content 3</td>

                <td>content 4</td>

        </tr>

        <tr>

                <td>content 5</td>

                <td>content 6</td>

                <td>content 7</td>

                <td>content 8</td>

        </tr>

        <tr>

                <td>content 9</td>

                <td>content 10</td>

                <td>content 11</td>

            <td>content 12</td>

        </tr>

    </tbody>

</table>

 

[css]

table, th, td {

border: 1px solid #222;

}

 

[js]

window.onload = function() { // 화면 로딩 후 실행

    let tds = document.querySelectorAll('td'); // td 태그 배열로 변수에 할당

    tds.forEach((item) => { // 각각의 td에 실행

        let tdContent = item.innerHTML; // td 태그의 내용 변수에 할당

        item.setAttribute('title', tdContent); // title 속성에 내용 할당

    });

};

 

See the Pen [JavaScript] assign table contents to title attribute _ 테이블 내용 타이틀 속성에 할당 by j. sik (@jsik) on CodePen.