एक टेबल पंक्ति पर एक ऑनक्लिक ईवेंट जोड़ना

Question

मैं जावास्क्रिप्ट के माध्यम से एक टेबल पंक्ति में एक ऑनक्लिक ईवेंट जोड़ने की कोशिश कर रहा हूं।

function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 1; i < rows.length; i++) { 
     row = table.rows[i]; 
     row.onclick = function(){ 
          var cell = this.getElementsByTagName("td")[0]; 
          var id = cell.innerHTML; 
          alert("id:" + id); 
         }; 
    } 
} 

यह फ़ायरफ़ॉक्स में अपेक्षा के अनुरूप काम करता है, लेकिन इंटरनेट एक्सप्लोरर (IE8) में मैं तालिका सेल का उपयोग नहीं कर सकते हैं। मेरा मानना ​​है कि किसी भी तरह से इस तथ्य से संबंधित है कि ऑनक्लिक फ़ंक्शन में "यह" को "टेबल" (या ऐसा कुछ) के बजाय "विंडो" के रूप में पहचाना जाता है।

यदि मैं वर्तमान पंक्ति तक पहुंच सकता हूं तो मैं ऑनक्लिक फ़ंक्शन में getElementById निष्पादित कर सकता हूं, मुझे ऐसा करने का कोई तरीका नहीं मिल रहा है। कोई सुझाव?

धन्यवाद!

Answer 1

कुछ ऐसा है।

function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 0; i < rows.length; i++) { 
     var currentRow = table.rows[i]; 
     var createClickHandler = 
      function(row) 
      { 
       return function() { 
             var cell = row.getElementsByTagName("td")[0]; 
             var id = cell.innerHTML; 
             alert("id:" + id); 
           }; 
      }; 

     currentRow.onclick = createClickHandler(currentRow); 
    } 
} 

संपादित

कार्य demo।

Answer 2

हेड बहुत लंबे समय तक जेक में फंस गया। यह काम करेगा।

function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 1; i < rows.length; i++) { 
     var row = table.rows[i]; 
     row.onclick = function(myrow){ 
          return function() { 
          var cell = myrow.getElementsByTagName("td")[0]; 
          var id = cell.innerHTML; 
          alert("id:" + id); 
         }; 
        }(row); 
    } 
} 

Answer 3

मुझे लगता है कि IE के लिए आप Event object की srcElement संपत्ति का उपयोग करने की आवश्यकता होगी। अगर jQuery आपके लिए एक विकल्प है, तो आप इसका उपयोग करने पर विचार करना चाहेंगे - क्योंकि यह आपके लिए अधिकतर ब्राउज़र अंतर को सारणीबद्ध करता है। उदाहरण jQuery:

$("#tableId tr").click(function() { 
    alert($(this).children("td").html()); 
}); 

Answer 4

this.getElementsByTagName("td")[0]) लाइन को बदलने row.getElementsByTagName("td")[0]; पढ़ने की कोशिश करें। इसे बंद करने में row संदर्भ को कैप्चर करना चाहिए, और इसे अपेक्षा के अनुसार काम करना चाहिए।

संपादित करें: उपर्युक्त गलत है, क्योंकि पंक्ति वैश्विक चर है - जैसा कि अन्य ने कहा है, एक नया चर आवंटित करें और फिर बंद करने में इसका उपयोग करें।

Answer 5

मेरे तालिका एक और iframe में है तो मैं संशोधित कि साथ काम करने के SolutionYogi जवाब:

<script type="text/javascript"> 
window.onload = addRowHandlers; 
function addRowHandlers() { 
    var iframe = document.getElementById('myiframe'); 
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; 

    var table = innerDoc.getElementById("mytable"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 0; i < rows.length; i++) { 
     var currentRow = table.rows[i]; 
     var createClickHandler = 
      function(row) 
      { 
       return function() { 
             var cell = row.getElementsByTagName("td")[0]; 
             var id = cell.innerHTML; 
             alert("id:" + id); 
           }; 
      } 

     currentRow.onclick = createClickHandler(currentRow); 
    } 
} 
</script> 

Answer 6

यहाँ है एक कॉम्पैक्ट और एक ही शुद्ध जावास्क्रिप्ट का एक सा क्लीनर संस्करण (नहीं एक jQuery) समाधान के रूप में @redsquare और @SolutionYogi (फिर से ऊपर चर्चा की: सभी HTML तालिका पंक्तियों के onclick ईवेंट हैंडलर्स जोड़ने) है कि सभी प्रमुख वेब ब्राउज़र में काम करता है, नवीनतम IE11 सहित:

function addRowHandlers() { 
    var rows = document.getElementById("tableId").rows; 
    for (i = 0; i < rows.length; i++) { 
     rows[i].onclick = function(){ return function(){ 
       var id = this.cells[0].innerHTML; 
       alert("id:" + id); 
     };}(rows[i]); 
    } 
} 
window.onload = addRowHandlers(); 

कार्य DEMO

नोट: आदेश में यह रूप में अच्छी तरह IE8 में काम करने के लिए में, this सूचक उपयोग function(myrow) तरह स्पष्ट पहचानकर्ता के बजाय के रूप में @redsquare ने सुझाव दिया। सर्वश्रेष्ठ संबंध,

Answer 7

मैं एक टेबल पंक्ति का चयन करने की कोशिश कर रहा था, ताकि इसे क्लिपबोर्ड पर आसानी से कॉपी किया जा सके और फिर Excel में चिपकाया जा सके। नीचे आपके समाधान का एक छोटा सा अनुकूलन है।

संदर्भ:

• Where I took the window.prompt line from (Jarek Milewski):

  The user is presented with the prompt box, where the text to be copied is already selected...

• For selecting a complete table (Tim Down)। बहुत दिलचस्प है, लेकिन मैं <tr> तत्व के लिए अनुकूलित करने में सक्षम नहीं था।

<!DOCTYPE html> 
<html> 
<body> 

<div> 
    <table id="tableId" border=1> 
     <tbody> 
     <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr> 
     <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr> 
     <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr> 
     </tbody> 
    </table> 
</div> 

<script> 
function addRowHandlers() { 
    var table = document.getElementById("tableId"); 
    var rows = table.getElementsByTagName("tr"); 
    for (i = 0; i < rows.length; i++) { 
     var currentRow = table.rows[i]; 
     var createClickHandler = 
      function(row) 
      { 
       return function() { 
             var cell = row.getElementsByTagName("td")[0]; 
             var id = cell.innerHTML; 

             var cell1 = row.getElementsByTagName("td")[1]; 
             var id2 = cell1.innerHTML; 
             // alert(id + " - " + id2); 
             window.prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>") 
           }; 
      }; 

     currentRow.onclick = createClickHandler(currentRow); 
    } 
} 
window.onload = addRowHandlers(); 
</script> 
</body> 
</html> 

Answer 8

यहाँ कैसे मैं यह कर रहा है। मैं एक थैड और टैडी टैग के साथ एक टेबल बनाते हैं। और उसके बाद आईडी द्वारा टोब तत्व में एक क्लिक ईवेंट जोड़ें।

<script> 
    document.getElementById("mytbody").click = clickfunc; 
    function clickfunc(e) { 
     // to find what td element has the data you are looking for 
     var tdele = e.target.parentNode.children[x].innerHTML; 
     // to find the row 
     var trele = e.target.parentNode; 
    } 
</script> 
<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody id="mytbody"> 
     <tr><td>Data Row</td><td>1</td></tr> 
     <tr><td>Data Row</td><td>2</td></tr> 
     <tr><td>Data Row</td><td>3</td></tr> 
    </tbody> 
</table>