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

**محمد الطويل** · 07-01-2008

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

لدي هذا

كود 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-01-2008

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

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

كود 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

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

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

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

فيما يتعلق بالـ 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

السلام عليكم

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

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

وشكراً لكم

أخوكم حمد

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

أدوات الموضوع

بحث في الموضوع

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

المواضيع المتشابهه

مشكلة : تتوقف حركة الـ gif عند الضغط علي لينك لعمل حركة جافا سكربت

سؤال بخصوص القوائم المصنوعة بواسطة " Sothink DHTMLMenu " اتمنى المساعدة

ضوابط المشاركة