부트스트랩 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]은 첫번째 컬럼 값을 나타낸다.
결과
'개발 > 프론트' 카테고리의 다른 글
[자바스크립트, html] 화면 녹화, 녹음하기 (1) | 2021.03.26 |
---|---|
[Vue.js] v-date-picker 평일만 선택하기 (0) | 2021.01.22 |