javaScript onclick مع صفوف الجدول

StackOverflow https://stackoverflow.com/questions/454517

سؤال

أواجه مشاكل في رمز JScript الخاص بي. أحاول أن أحلق جميع الصفوف في طاولة وإضافة حدث onclick. يمكنني الحصول على حدث Onclick لإضافة ولكن لدي بعض المشاكل.

المشكلة الأولى هي أن جميع الصفوف ينتهي بها الأمر إلى إعداد المعلمة الخاطئة لحدث OnClick.

المشكلة الثانية هي أنه يعمل فقط في IE.

ها هو مقتطف الكود ...

shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
    row = table.getElementsByTagName("tr")[i];
    orderID = row.getAttributeNode("id").value;
    alert("before onclick: " + orderID);
    row.onclick=function(){shanesObj.tableRowEvent(orderID);};
}}

shanesObj.tableRowEvent = function(orderID){
alert(orderID);}

يقع الجدول في الموقع التالي ...

http://www.blackcanyonsoftware.com/ordertracker/testajax.html

هوية كل صف بالتسلسل هي ... 95 ، 96 ، 94 ...

لسبب ما ، عندما يتم استدعاء Shanesobj.tablerowevent ، يتم إعداد Onclick لجميع الصفوف مع معرف القيمة الأخير الذي مر بالتكرار على الحلقة (94).

أضفت بعض التنبيهات إلى الصفحة لتوضيح المشكلة.

هل كانت مفيدة؟

المحلول

عندما يتم استدعاء وظيفة في JavaScript ، فإن أول ما يحدث هو أن المترجم يضع سلسلة النطاق إلى الحالة التي كانت فيها عندما تم تعريف الوظيفة. في حالتك ، تبدو سلسلة النطاق:

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

لذلك عندما المتغير رقم التعريف الخاص بالطلب يتم تعثره بواسطة مترجم JavaScript ، وهو يبحث في سلسلة النطاق لهذا المتغير. لا يوجد رقم التعريف الخاص بالطلب محددة داخل الخاص بك عند النقر الوظيفة ، وبالتالي فإن المكان التالي للبحث هو في الداخل AddTableEvents. سوف تفكر رقم التعريف الخاص بالطلب تم تعريفه هنا ، لكن بما أنك لم تعلن رقم التعريف الخاص بالطلب مع الكلمة الرئيسية VAR ، رقم التعريف الخاص بالطلب أصبح متغير عالمي ، لذلك رقم التعريف الخاص بالطلب لم يتم العثور عليه في الداخل AddTableEvents. آخر مكان يجب أن ننظر إليه هو داخل Global ، ومن المؤكد أنه موجود ، وقيمتها هي الأخيرة التي تم تعيينها ، وفي هذه الحالة تكون القيمة الأخيرة orderid = row.getAttributEnode ("id"). القيمة ؛ في حلقة.

لرؤية هذا بشكل أكثر وضوحًا ، انظر إلى ما يلي

shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
        row = table.getElementsByTagName("tr")[i];
        orderID = row.getAttributeNode("id").value;
        alert("before onclick: " + orderID);
        row.onclick=function(){var orderID = orderID; shanesObj.tableRowEvent(orderID);};
}
orderID = -1;
}

shanesObj.tableRowEvent = function(orderID){
alert(orderID);
}

ستكون نتيجة النقر هنا دائمًا -1.

لذلك ، للتغلب على هذه المشكلة ، أقترح عليك إسقاط كل الكود الإضافي وغير الضروري واستخدام شيء مثل ما يلي ،

for(i=1; i<table.getElementsByTagName("tr").length; i++){
        row = table.getElementsByTagName("tr")[i];
        row.onclick=function(){shanesObj.tableRowEvent(this.id);};

}

ما عليك سوى الوصول إلى سمة المعرف مباشرة من الكائن المسمى.

ملاحظة: ليس لدي أي فكرة عن سبب عدم عمل الكود الخاص بك في IE (لقد نجح في IE7).

نصائح أخرى

لماذا لا ترفع معالج الحدث إلى الجدول والاستيلاء على rowindex للخلية التي أطلقت حدث النقر داخل معالج النقر.

تحصل على أبسط بكثير من هذا!
من الواضح أنه يمكن استخدامه مع صفوف مبنية بشكل ديناميكي.
الكثير من الحب،
SB.

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var TO,URL;
function Link(url){
 URL=url;
 TO=setTimeout('window.location=URL;',500);
}
//-->
</script>
</head>

<body>

<tr onclick="Link('anotherpage.html');">
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>

<tr onclick="Link('yetanotherpage.html');">
<td>row2 cell3</td>
<td>row2 cell4</td>
</tr>

</body>

</html>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top