2011-08-04 3 views
0

정렬 가능한 행이있는 테이블을 갖기 위해 노력하고 있습니다. 그러나이 행 중 하나에 드롭 다운이 필요합니다.TH를 사용한 드롭 다운 onclick TH 클릭, 드롭 다운이 아닙니다.

드롭 다운을 클릭하면 테이블 헤더의 click 이벤트가 실행되어서는 안되는 일이 발생합니다.

나는이 발견

http://www.velocityreviews.com/forums/t367867-table-row-background-onclick.html

을하지만 생각 - 더 우아한 해결책이 있어야한다?

수취인?

죄송합니다 - 예를 잊었습니다!

<th onclick="SortBy(event,'ctl00$mainContent$hiddenPBButton','descending','1')" class="tableDataHeader"> 
     <select id="groupby1"` onchange="performPostBackfromDrop(event,this,'ctl00$mainContent$hiddenPBButton');"><option value="Enquiry Type">Enquiry Type</option> 
      <option value="Location">Location</option> 
      <option value="Source">Source</option> 
      <option selected="" value="User">User</option> 
     </select> 

    </th> 

JS

당신이 볼 수 있듯이 - (파이어 폭스하지만 선택에 onclick 이벤트를 추가하고 전파를 중지 선명도

function SortBy(e, PBID,direction, field) 
{ 
    performPostBackfromSort(PBID,direction,field); 
} 
function performPostBackfromSort(PBID, direction, field) 
{ 
    __doPostBack(PBID, "sort"+"-"+direction+"-"+field); 
} 

function performPostBackfromDrop(e,sender, PBID) 
{ 
    var value = getDropDownSelectedValue(sender); 
    __doPostBack(PBID, $j(sender).attr('id')+"-"+value); 
} 
+0

코드는 어디에 있습니까? jQuery와 같은 프레임 워크를 사용하고 있습니까? – Shef

+0

코드를 게시 할 수 있습니까? 가능한 경우 http://jsfiddle.net – Calum

+0

죄송합니다 - 좀 더 많은 정보를 입력해야합니다! 그것은 jQuery입니다! 코드 게시 –

답변

2

그것을 포함 시켰습니다 - JS 꽤 일반적입니다) 또는 버블 링 중지 (IE). 다음은 내가 사용한 샘플 코드입니다.

<html> 
<head> 
<title>test</title> 
<script> 
function divOnclick(event) 
{ 
    alert("Div onclick"); 
} 
function selectOnclick(event) 
{ 
    stopPropagation(event); 
} 
function selectOnchange(event) 
{ 
    alert("Select onchange"); 
} 
function stopPropagation(ev) 
{ 
    ev = ev||event; 
    ev.stopPropagation? ev.stopPropagation() : ev.cancelBubble = true; 
} 
</script> 
</head> 
<body> 
    <div id="test" style="width:200px;height:200px;" onclick="divOnclick(event)"> 
     <select id="groupby1"` onclick="selectOnclick(event);" onchange="selectOnchange(event);"> 
      <option value="Enquiry Type">Enquiry Type</option> 
      <option value="Location">Location</option> 
      <option value="Source">Source</option> 
      <option selected="" value="User">User</option> 
     </select> 
    </div> 
    </body> 
</html>