클릭 할 때 테이블 헤더 이름을 경고하십시오.

아래에서 코드를 수정하여 사용자가 열 머리글 상자를 클릭했을 때 열 머리글의 이름을 반환 할 수있는 방법은 무엇입니까? 예. "파일 번호"상자를 클릭하면 자바 스크립트 경고 상자에서 열 머리글의 이름 ("th)이"파일 번호 "라는 것을 알려줍니다.클릭 할 때 테이블 헤더 이름을 경고하십시오.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#mstrTable { 
    border: 1px solid black 
} 
#mstrTable td, th { 
    border: 1px solid black 
} 

#mstrTable tr.normal td { 
    color: black; 
    background-color: white; 
} 
#mstrTable tr.highlighted td { 
    color: white; 
    background-color: gray; 
} 
</style> 
</head> 
<body> 
    <table id="mstrTable"> 
    <thead> 
     <tr> 
     <th>File Number</th> 
     <th>Date1</th> 
     <th>Date2</th> 
     <th>Status</th> 
     <th>Num.</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>KABC</td> 
     <td>09/12/2002</td> 
     <td>09/12/2002</td> 
     <td>Submitted</td> 
     <td>0</td> 

     </tr> 
     <tr> 
     <td>KCBS</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Approved</td> 
     <td>1&nbsp;</td> 
     </tr> 

     <tr> 
     <td>WFLA</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Submitted</td> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td>WTSP</td> 
     <td>09/15/2002</td> 
     <td>09/15/2002</td> 
     <td>In-Progress</td> 
     <td>3</td> 
     </tr> 
    </tbody> 
    </table> 

<script type="text/javascript"> 
(
    function() 
    { 
     var trows = document.getElementById("mstrTable").rows; 

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

     function highlightRow(e) 
     { 
     alert('Row is ' + (this.rowIndex-1)) 
      for (var t = 1; t < trows.length; ++t) 
      { 
       trow = trows[t]; 
       trow.className = (trow == this && trow.className != "highlighted") ? "highlighted" : "normal"; 
      } 
     } 
    } 
)(); 
</script> 
</body> 
</html>

출처

2013-01-14 user1959234

jQuery에 대해 살펴 보았습니까? 이것은 이러한 일을 단순하게 만듭니다. –

라이브러리 및 추가 파일을로드하지 않는 것이 좋습니다. – user1959234

모든 루핑은 무엇입니까! 루프가 필요 없으므로 클릭 한 이벤트 개체를 사용하십시오!

//assumes one thead and one tbody 

var table = document.getElementById("mstrTable"); 
var thead = table.getElementsByTagName("thead")[0]; 
var tbody = table.getElementsByTagName("tbody")[0]; 

tbody.onclick = function (e) { 
    e = e || window.event; 
    var td = e.target || e.srcElement; //assumes there are no other elements inside the td 
    var row = td.parentNode; 
    row.className = row.className==="highlighted" ? "" : "highlighted"; 
} 

thead.onclick = function (e) { 
    e = e || window.event; 
    var th = e.target || e.srcElement; //assumes there are no other elements in the th 
    alert(th.innerHTML); 
}

전체 테이블 위의 수 하나의 클릭 이벤트, 난에 클릭 된 요소 유형을 확인하고 싶지 않았다.

JSFiddle

출처

2013-01-14 18:21:02 epascarello

귀하의 예제가 완벽하게 작동하지만, 하나의 prob 만해도 행 번호가 무엇인지 알아야합니다. (나중에 db 작업을 할 계획이며 행 번호가 필요합니다) – user1959234

그리고 [row.rowIndex'] (https://developer.mozilla.org/en-US/docs/DOM/tableRow .rowIndex). [JSFiddle] (http://jsfiddle.net/wv74z/) – epascarello

또 다른 문제는 다른 행을 클릭하면 기존 행이 흰색으로 재설정되지 않으므로 선택된 여러 행이있는 것처럼 보입니다. – user1959234

이 그것을 수행해야합니다 jsFiddle example합니다.

(
    function() { 
     var trows = document.getElementById("mstrTable").rows; 
     for (var t = 1; t < trows.length; ++t) { 
      trow = trows[t]; 
      trow.className = "normal"; 
      trow.onclick = highlightRow; 
     } 
     var theads = document.getElementsByTagName("th"); 
     for (var t = 0; t < theads.length; t++) { 
      thead = theads[t]; 
      thead.onclick = highlightHead; 
     } 
     function highlightRow(e) { 
      alert('Row is ' + (this.rowIndex - 1)) 
      for (var t = 1; t < trows.length; ++t) { 
       trow = trows[t]; 
       trow.className = (trow == this && trow.className != "highlighted") ? "highlighted" : "normal"; 
      } 
     } 
     function highlightHead(e) { 
      alert('Head is ' + this.innerHTML.toString()); 
     } 
    })();

출처

2013-01-14 18:16:33 j08691

매력처럼 작동합니다. 저의 좌절감을 완화 해 주셔서 감사합니다. DOM은 여전히 나에게 정말 새로운 것입니다. 나는 분명히 배울 것이 많다. 이 코드를 주셔서 감사합니다. – user1959234

클릭 할 때 테이블 헤더 이름을 경고하십시오.

답변

관련 문제