위쪽 화살표와 아래쪽 화살표로 선택된 테이블 행이 있지만이를 클릭 할 수도 있습니다.

위쪽 화살표와 아래쪽 화살표가 선택된 테이블 행이 있지만이를 클릭 할 수도 있습니다. 행을 클릭하면 현재 선택된 것으로 표시되지 않습니다. 또한 밑에있는 버튼의 URL의 일부로 마지막으로 선택한 행의 첫 번째 셀 내용을 사용할 수 있기를 원합니다. 아무도 도와 줄 수 있습니까?위쪽 화살표와 아래쪽 화살표로 선택된 테이블 행이 있지만이를 클릭 할 수도 있습니다.

(
 
function() { 
 
    var trows = document.getElementById("mstrTable").rows; 
 
    var selectedRow = 1; 
 

 
    for (var t = 1; t < trows.length; ++t) { 
 
    trow = trows[t]; 
 
    trow.className = t === 1 ? "highlighted" : "normal"; 
 
    trow.onclick = highlightRow; 
 
    }//end for 
 

 
    function highlightRow(rowObj, index) { 
 
    rowObj = rowObj || this; 
 
    index = index || selectedRow; 
 
    trows[index].className = "normal"; 
 
    rowObj.className = "highlighted"; 
 
    selectedRow = rowObj.rowIndex; 
 
    }//end function 
 

 
    function kbNavigate(evt) { 
 
    evt = evt || window.event; 
 
    var key = evt.keyCode; 
 
    switch (key) { 
 
     case 38: // UP arrow 
 
     if(selectedRow === 1) return; 
 
     highlightRow(trows[selectedRow-1], selectedRow); 
 
     break; 
 
     case 40: // DOWN arrow 
 
     if(selectedRow === trows.length-1) return; 
 
     highlightRow(trows[selectedRow+1], selectedRow); 
 
     break; 
 
    } 
 
    } 
 

 
    document.onkeydown = kbNavigate; 
 
}//end function 
 
)();//end script

body {background: #000042;} 
 

 
.cas { 
 
     font-size: 20pt; 
 
     /*font-family: fixedsys, LucidaTerminal, monospace;*/ 
 
     font-family: Courier, monospace; 
 
     color: Gold; 
 
} 
 

 
cas_h1 { 
 
     font-size: 30pt; 
 
} 
 

 
table { 
 
     border-collapse: collapse; 
 
} 
 

 
table, th, td { 
 
     border: 2px solid Gold; 
 
     color: Gold; 
 
     padding: 8px; 
 

 
} 
 

 
td, th { 
 
     font-size: 20pt; 
 
     /*font-family: fixedsys, LucidaTerminal, monospace;*/ 
 
     font-family: Courier, monospace; 
 
} 
 

 
.cont { 
 
     border: none; 
 
} 
 

 
tr.normal td { 
 
     color: Gold; 
 
     background-color: #000042; 
 
} 
 
tr.highlighted td { 
 
     color: black; 
 
     background-color: OliveDrab; 
 
     font-weight: bold; 
 
}

<html> 
 
<head> 
 
<title>cas</title> 
 
<link href="cas.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
<center> 
 
<p class='cas'> 
 
<br> 
 
<cas_h1>CAS</cas_h1><br> 
 
<br> 
 
<table class='cont'> 
 
<tr> 
 
<td class='cont'> 
 

 
<table id="mstrTable"> 
 
<thead> 
 
<tr> 
 
<td>Order</td> 
 
<td>Customer</td> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<td>1234567</td> 
 
<td>Smith</td> 
 
</tr> 
 
<td>1234566</td> 
 
<td>Smith</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 

 
</td> 
 
</tr> 
 
<tr> 
 
<td class='cont'> 
 
<button type='button' style='height: 30px;width: 80px' onclick='window.location.href="action1.php?order=1234567"'>Action 1</button> 
 
<button type='button' style='height: 30px;width: 80px' onclick='window.location.href="action2.php?order=1234567"'>Action 2</button> 
 
</td> 
 
</tr> 
 
</table> 
 
</p> 
 
</center> 
 
<script type="text/javascript" src="cas_table.js"></script> 
 
</body> 
 
</html>

출처

2016-11-01 John_F

JavaScript 핸들러를 클릭하여 첫 번째 인수로 이벤트 객체를 전달 자바 스크립트, CSS, HTML : 는 여기에 지금까지 가지고있는 코드입니다. 이렇게하면 highlightRow의 첫 번째 인수가 거짓 값 대신 이벤트 객체가되므로 기본값 인 this이 될 수 있습니다.

아래의 코드는 단순히

(
 
function() { 
 
    
 
    var trows = document.getElementById("mstrTable").rows; 
 
    var selectedRow = 1; 
 

 
    for (var t = 1; t < trows.length; ++t) { 
 
    trow = trows[t]; 
 
    trow.className = t === 1 ? "highlighted" : "normal"; 
 
    // wrap the click handler to achieve the desired behavior. 
 
    trow.onclick = function(e){highlightRow(this)}; 
 
    }//end for 
 
    
 
    // add action handlers 
 
    document.querySelector('.action.action1').addEventListener('click', navigate('action1')); 
 
    document.querySelector('.action.action2').addEventListener('click', navigate('action2')); 
 
     
 
    function navigate(action){ 
 
    return function(){ 
 
     var row = trows[selectedRow]; 
 
     // querySelector gets the first matching item 
 
     // so the following code will get the contents of the 
 
     // first cell of the selected row. 
 
     var order = row.querySelector('td').innerHTML; 
 
     var url = action + '.php?order=' + order; 
 
     alert(url); 
 
     // window.location.href = url; 
 
    } 
 
    } 
 
    
 
    function highlightRow(rowObj, index) { 
 
    rowObj = rowObj || this; 
 
    index = index || selectedRow; 
 
    trows[index].className = "normal"; 
 
    rowObj.className = "highlighted"; 
 
    selectedRow = rowObj.rowIndex; 
 
    }//end function 
 

 
    function kbNavigate(evt) { 
 
    evt = evt || window.event; 
 
    var key = evt.keyCode; 
 
    switch (key) { 
 
     case 38: // UP arrow 
 
     if(selectedRow === 1) return; 
 
     highlightRow(trows[selectedRow-1], selectedRow); 
 
     break; 
 
     case 40: // DOWN arrow 
 
     if(selectedRow === trows.length-1) return; 
 
     highlightRow(trows[selectedRow+1], selectedRow); 
 
     break; 
 
    } 
 
    } 
 

 
    document.onkeydown = kbNavigate; 
 
}//end function 
 
)();//end script

body {background: #000042;} 
 

 
.cas { 
 
     font-size: 20pt; 
 
     /*font-family: fixedsys, LucidaTerminal, monospace;*/ 
 
     font-family: Courier, monospace; 
 
     color: Gold; 
 
} 
 

 
cas_h1 { 
 
     font-size: 30pt; 
 
} 
 

 
table { 
 
     border-collapse: collapse; 
 
} 
 

 
table, th, td { 
 
     border: 2px solid Gold; 
 
     color: Gold; 
 
     padding: 8px; 
 

 
} 
 

 
td, th { 
 
     font-size: 20pt; 
 
     /*font-family: fixedsys, LucidaTerminal, monospace;*/ 
 
     font-family: Courier, monospace; 
 
} 
 

 
.cont { 
 
     border: none; 
 
} 
 

 
tr.normal td { 
 
     color: Gold; 
 
     background-color: #000042; 
 
} 
 
tr.highlighted td { 
 
     color: black; 
 
     background-color: OliveDrab; 
 
     font-weight: bold; 
 
}

<html> 
 
<head> 
 
<title>cas</title> 
 
<link href="cas.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
<center> 
 
<p class='cas'> 
 
<br> 
 
<cas_h1>CAS</cas_h1><br> 
 
<br> 
 
<table class='cont'> 
 
<tr> 
 
<td class='cont'> 
 

 
<table id="mstrTable"> 
 
<thead> 
 
<tr> 
 
<td>Order</td> 
 
<td>Customer</td> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<td>1234567</td> 
 
<td>Smith</td> 
 
</tr> 
 
<td>1234566</td> 
 
<td>Smith</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 

 
</td> 
 
</tr> 
 
<tr> 
 
<td class='cont'> 
 
<button type='button' style='height: 30px;width: 80px' class="action action1">Action 1</button> 
 
<button type='button' class="action action2" style='height: 30px;width: 80px'>Action 2</button> 
 
</td> 
 
</tr> 
 
</table> 
 
</p> 
 
</center> 
 
<script type="text/javascript" src="cas_table.js"></script> 
 
</body> 
 
</html>

행동 선택한 테이블 행에서 끌어 업데이트 된 편집 그래서

trow.onclick = function(e){ highlightRow(this); };

같이 클릭 핸들러를 포장하여 해당 문제를 해결합니다.

출처

2016-11-01 12:33:51 Mobius

이것은 클릭 문제에 매우 효과적입니다. 난 그냥 버튼의 URL에 (현재 하드 코딩 된)에 포함하도록 선택한 마지막 행의 첫 번째 셀의 내용을 얻을 수 있어야합니다. –

@ John_F 답변 업데이트 – Mobius

당신은 스타입니다. 실제로 URL 비트가 나 자신을 작동시키고 업데이트 된 코드를 게시 할 예정 이었지만 당신이 나를 맞았 음을 알았습니다. 많은 감사 :-) –

위쪽 화살표와 아래쪽 화살표로 선택된 테이블 행이 있지만이를 클릭 할 수도 있습니다.

답변

관련 문제