एक तालिका पंक्ति इस प्रकार भी तालिका पंक्तियों में यह

Question

में लिंक मैं onClick उपयोग कर रहा हूँ है कि में onClick का उपयोग कर:

<tr onmouseover="this.style.cursor='pointer'" onclick="http://www.whatever.com/index.php?var={$foo1}"> 

मैं भी इस तालिका पंक्ति में कुछ क्षेत्रों में एक लिंक डाल करने के लिए कुछ की जरूरत है, यानी

<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td><a href="specialLink.php?var={$foo2}">Here</a></td> 
<td>Stuff Here</td> 

समस्या है, "आंतरिक लिंक" (specialLink.php), क्लिक किया नहीं जा सकता क्योंकि पंक्ति लिंक वरीयता दी जाएगी। क्या मेरे पास कोई विकल्प है?

धन्यवाद

Answer 1

मैं ऐसा करूँगा ':

<script type="text/javascript"> 
var link=true; 
</script> 

<tr onmouseover="this.style.cursor='pointer'" onclick="if (link) window.location ='http://www.whatever.com'"> 

<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td onmouseover="link=false;" onmouseout="link=true;"><a href="specialLink.php">Here</a></td> 
<td>Stuff Here</td> 

Answer 2

तुम भी ऐसा कर सकते हैं (और यह jQuery का इस्तेमाल करता है):

$("td") 
    .click(function(e){ 
     var tag = e.target.nodeName; 
     if(tag === 'A'){ 
      // link was clicked 
     } else { 
      // normal td was clicked 
     } 
    }); 

Example।

यह इनलाइन जावास्क्रिप्ट का उपयोग करने की आवश्यकता को प्रतिस्थापित करता है।

Answer 3

तालिका कक्ष पर एक आईडी डालने का प्रयास करें और क्लिक ईवेंट को संभालने के लिए jQuery का उपयोग करें। उदाहरण के लिए ...

<tr id="row1"> 
    <td id="cell1" class="table_cell">etc</td> 
    <td id="cell2" class="table_cell">etc</td> 
</tr> 

आपका jQuery कोड जाल प्रत्येक तालिका सेल की क्लास के माध्यम से क्लिक कर सकते हैं इस प्रकार है ...

$(".table_cell").click(function(){ 
    // Activated by a click on any table cell with the class "table_cell" 
    var cell_id = $(this).attr("id"); // Loads id of td element clicked on 
    // Insert code that deals with a click on that specific table cell here... 
}); 

तुम भी एक शीर्षक टैग में यूआरएल डाल कोशिश कर सकते हैं, पुन: प्राप्त करने यह उसी तरह से है जैसे मैं उपरोक्त आईडी पुनर्प्राप्त करता हूं, इस प्रकार बहुत गन्दा जावास्क्रिप्ट को हटा देता है और यदि/तो कोड।

jQuery के .hover() का उपयोग करके आप एकमात्र jQuery फ़ंक्शन के साथ ऑनसाउसओवर और ऑनमाउसआउट को भी बदल सकते हैं। इसका परिणाम कोड में छोटा, क्लीनर होता है और किसी भी पेज पर आसानी से उपयोग के लिए बाहरी .js फ़ाइल में रखा जा सकता है।

Answer 4

मैं वास्तव में पूरी पंक्ति पर एक ईवेंट डालूंगा, प्रत्येक पंक्ति पर नहीं। विशेष रूप से यदि आपके पास सैकड़ों हैं। तो ...

<table id="links" style="cursor: pointer;"> 
    <tr data-var="{$foo1}"> 
     <td><a href="http://example.com/">Link</a></td> 
     <td>Another cell</td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    document.getElementById('links').onclick = function(e) { 
     e = e || window.event; 
     var t = e.srcElement || e.target; 
     if(!t.tagName) t = t.parentNode; // some browsers treat text nodes as potential targets 
     while(t != this) { 
      if(t.tagName == "A") break; 
      if(t.getAttribute("data-var")) 
       location.href = "http://example.com/index.php?var="+t.getAttribute("data-var"); 
     } 
    }; 
</script> 

इस विधि वैश्विक क्षेत्र को दूषित नहीं करता है, और एक भी घटना जो हमेशा प्रति पंक्ति एक से अधिक कुशल है उपयोग करता है।

Answer 5

आप निरंतर/आने वाली घटनाओं को बाईपास करने के लिए stopImmediatePropagation() का उपयोग कर सकते हैं।

लघु उदाहरण: jsfiddle पर

<tr onclick="alert('tr event')"> 
    <td>tr event</td> 
    <td onclick="alert('td');event.stopImmediatePropagation();">NO tr event</td> 
</tr> 

टेस्ट इस: http://jsfiddle.net/g8Anh/6/

Answer 6

अपने लिंक आसपास के टीडी तत्व पर निम्नलिखित attr डाल:

<td onclick="event.cancelBubble=true;">your link with event</td> 

यह है कि हम कैसे इसे हल है मेरे काम पर आईई के लिए