개발/프론트

[자바스크립트, 부트스트랩] 선택한 테이블 row 색 변경 및 값 받아오기

크리쓰마스 2021. 2. 18. 14:58

부트스트랩 table에서 선택한 row의 색깔을 변경하고,

 

해당 row의 값을 가져온다.

 

소스코드

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table id="time_table" class="table table-hover table-bordered table-striped">
    <thead>
        <tr>
            <th style="text-align:center"> number </th>
            <th style="text-align:center"> number2 </th>
        <tr>
    </thead>
    <tbody>
        <tr onclick="javascript:getReserveInfo(this);">
            <td style="text-align:center"> 1 </td>
            <td style="text-align:center"> 2 </td>
        </tr>
 
        <tr onclick="javascript:getReserveInfo(this);">
            <td style="text-align:center"> 3 </td>
            <td style="text-align:center"> 4 </td>
        </tr>
    </tbody>
</table>
 cs

 

자바스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function getReserveInfo(target) {
    var tbody = target.parentNode;
    var trs = tbody.getElementsByTagName('tr');
 
    var backColor = "#ffffff";
    var textColor = "black";
    var orgBColor = "#FF2E2E";
    var orgTColor = "#ffffff";
 
    var no = "";
    var no1 = "";
 
    for ( var i = 0; i < trs.length; i++ ) {
        if ( trs[i] != target ) {
            trs[i].style.backgroundColor = backColor;
            trs[i].style.color = textColor;
        } else {
            trs[i].style.backgroundColor = orgBColor;
            trs[i].style.color = orgTColor;
            var td = trs[i].getElementsByTagName('td');
            no = td[0].innerText;
            no1 = td[1].innerText;
        }
    }
}
 cs

 

td[0]은 0번째 컬럼 값, td[1]은 첫번째 컬럼 값을 나타낸다.

 

결과