Zizwar سؤال بخصوص حركة بواسطة document.getElementById

محمد الطويل · 06-01-2008, 11:00 PM

السلام عليكم ورحمة الله وبركاته

لدي هذا

كود HTML:

<table id="id_1">
CODE HTML
</table>

&

كود HTML:

<table id="id_2">
CODE HTML
</table>

ولدي

كود HTML:

<select> <option>قائمة 1</option> <option>قائمة 2</option> </select>

ما أريد عمله هو عند اختيار القائمة رقم 1 يقوم بتحويل الـtable إلى id_1 وإخفاء id_2
وكذلك الحال عند اختيار القائمة رقم 2 يقوم بتحويل الـtable إلى id_2 وإخفاء id_1

هو اكيد عن طريق onchange مع document.getElementById لكن لا أعرف كيف
حاولت مراراً وفشلت

أعذرني استاذي فخبرتي في الجافا ضعيفة إلى حد ما

حمد مبارك · 07-01-2008, 07:03 AM

والله يا مدمن حاب اني اساعدك بس من امس مو ناايم و ماني قادر اسوي شي

ان شاء الله اول ما اقوم راح ايبلك الكود

يله يا خوك الحين اقولك تصبح على خير

وسمووحه يا خوك

أخوك حمد

حمد مبارك · 07-01-2008, 03:13 PM

تفضل اخوي مدمن نت

جربه و عطني خبر

كود HTML:

<head> <script type="text/javascript">
function table_show() {
var selectedValue = document.getElementById("table_sel").value;
document.getElementById("table_1").style.visibility = "hidden";
document.getElementById("table_2").style.visibility = "hidden";
if(selectedValue == "table_1")
document.getElementById("table_1").style.visibility = "visible";
if(selectedValue == "table_2")
document.getElementById("table_2").style.visibility = "visible";
}
</script> </head> <body onload="table_show();"> <select id="table_sel" onchange="table_show();"> <optgroup label="Table"> <option value="table_1">Table - 1</option> <option value="table_2">Table - 2</option> </optgroup> </select> <div id="table_1" style="background-color:#00FF00; visibility:hidden;
border: 1px solid black;"> <h2>Table - 1</h2> </div> <div id="table_2" style="background-color:#FF00FF; visibility:hidden;
border: 1px solid black;"> <h2>Table - 2</h2> </div> </body> </html>

أخوك حمد

محمد الطويل · 08-01-2008, 11:49 AM

بيض الله وجهك ياحمد على الكود الرائع

والشكر موصول للأخ زيزوار إن لم يخب ظني على تعديله الكود بكود آخر

غير اني واجهت مشكلة في كلا الأكواد

فيما يتعلق بالـ CSS والتوافقية

بخصوص الكود الأول السابق (قبل التعديل) للأخ حمد فيوجد لخاصية الـ style هذه القيمة display:none OR inline

وعند تجربتها وفتحها بمتصفح الثعلب نجد أن طول الجدول أصبحت ضئيلة وكأن أحداً قد ضغط عليها
مثال:

كود HTML:

<table border="0" width="800" id="table_1" style="border: 1px solid #A7A7A7; display:none;">

لكن ميزة display ان الجداول تتغير دون تغيير اماكنها عند تنفيذ onchange

أما كود الأخ zizwar فيوجد لخاصية الـ style هذه القيمة visibility:hidden OR visible

وعند تجربتها وفتحها بأي متصفح أصبح الجدول ممتاز وبدون أي تشويه للطول أو غيرها

وهذه ميزة لها
لكن المشكلة أن الجدول تتغير مكانها عند تنفيذ حدث onchange
وهذا ما لا أريده

ما الحل أحبتي ؟

حمد مبارك · 08-01-2008, 01:24 PM

السلام عليكم

العفو اخوي مدمن ماسويت إلى الواجب

بس اذا ممكن بس تحط كود اخوي زيزوار عشان انتعلم اكثر

وشكراً لكم

أخوكم حمد