السلام عليكم ورحمة الله وبركاته
أريد أن أقوم بعمل جدول بسيط في صفحة انترنت بشروط معينة باستخدام الـ javascript
الجدول عبارة عن 5 معايير، يقوم المستخدم بترتيب هذه الجداول عبر عدة buttons
بدايةً، يكون الجدول بالشكل التالي:
فرضاً قمتُ بالضغط على زر Up الخاص بـ item1، سينتقل إلى أعلى مستوى واحد فقط وبقية العناصر ستُزاح لليسار:
وإذا قمتُ بالضغط على نفس الزر مجدداً، سينتقل مجدداً مستوى واحد لأعلى وسيكون هنالك مربع به علامة * في المنتصف:
حقيقةً لا أعلم كيف أستطيع القيام بذلك باستخدام الـ javascript
هنا ما قمت به لغاية الآن، وأقدر لكم أي مساعدة:
<HEAD>
<script LANGUAGE="JavaScript">
<!-- Begin
function moveUp()
{
}
function moveDown()
{
}
// End -->
</script>
</HEAD>
<BODY>
<table border="1">
<tr>
<th>Rank
</th>
<th colspan="5">
<p align="center">The Criteria
</th>
</tr>
<tr>
<td>
<p align="center">1
</td>
<td>
<form name="form1" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up1" value="Up" onclick="moveUp();"> Item 1
<input type="button" name="Down1" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form2" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up2" value="Up" onclick="moveUp();"> Item 2
<input type="button" name="Down2" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form3" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up3" value="Up" onclick="moveUp();"> Item 3
<input type="button" name="Down3" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form4" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up4" value="Up" onclick="moveUp();"> Item 4
<input type="button" name="Down4" value="Down" onclick="moveDown();">
</form>
</td>
<td>
<form name="form5" method="post" style="margin: 0; text-align: center;">
<input type="button" name="Up5" value="Up" onclick="moveUp();"> Item 5
<input type="button" name="Down5" value="Down" onclick="moveDown();">
</form>
</td>
</tr>
</table>
</body>
</html>