PDA

View Full Version : سوال: درخواست کمک برای اصلاح کد


arman1992
چهارشنبه 07 تیر 1391, 14:19 عصر
سلام. خسته نباشید.
بنده کد این صفحه (http://api.jquery.com/show/) رو برداشتم و به صورت زیر درش آوردم.


<html>
<head>
<style>
table {width: 860px;}
th.one {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
th.two {width: 10%; text-align: center; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
td.one {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 4px; border-radius: 4px;}
td.two {width: 10%; text-align: center; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 4px; border-radius: 4px;}
span {font-size:12px; font-family: sans-serif,verdana,geneva; color: rgb(255, 255, 255);}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="1">
<tr>
<th id="showr" scope="col" class="one">
<span style="cursor:pointer;">head1</span></th>
<th scope="col" class="two">
<span>head2</span></th>
</tr>
<tr>
<td class="one">
<span>cel</span></td>
<td class="two">
<span>cel</span></td>
</tr><tr>
<td class="one">
<span>cel</span></td>
<td class="two">
<span>cel</span></td>
</tr><tr>
<td class="one">
<span>cel</span></td>
<td class="two">
<span>cel</span></td>
</tr><tr>
<td id="hidr" class="one">
<span style="cursor:pointer;">close</span></td>
</tr>
</table>
<script>
$("#showr").click(function () {
$("td").first().show("fast", function showNext() {
$(this).next("td").show("fast", showNext);
});
});

$("#hidr").click(function () {
$("td").hide(1000);
});
</script>

</body>
</html>

دو تا مشکل داره:
۱. tdها ابتدای کار آشکار هستن که باید بسته باشن.
۲. با کلیک روی th تنها tr اول نمایش داده می‌شه و به ردیفهای بعد نمیره.
من خیلی‌ تازه‌کار هستم و روشهای مبتداینه‌ای که به ذهنم می‌رسید رو امتحان کردم اما جواب نداد. پیشاپیش تشکر می‌کنم.
امید امرایی
چهارشنبه 07 تیر 1391, 15:49 عصر
سوالتون مبهمه دوست عزیز
قراره چه اتفاقی بیفته ؟
arman1992
چهارشنبه 07 تیر 1391, 15:56 عصر
واضحه. رو head1 که کلیک می‌شه جدول باز و با کلیک روی close بسته می‌شه. مشابه منو درختی
blackmak
چهارشنبه 07 تیر 1391, 17:13 عصر
این خط را

$("td").first().show("fast", function showNext() {

به این خط تغییر بدین

$("td").show("fast", function showNext() {

البته اگه همچین چیزی می خواستین :لبخندساده:
arman1992
چهارشنبه 07 تیر 1391, 17:24 عصر
تشکر. به عنوان راه حال آخر و پاک کردن صورت مسئله، خوبه. برای مشکل اول چه کنم؟ باز هم ممنون
blackmak
چهارشنبه 07 تیر 1391, 18:47 عصر
<html>
<head>
<style>
table {width: 860px;}
th.one {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
th.two {width: 10%; text-align: center; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
td.one {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 4px; border-radius: 4px;}
td.two {width: 10%; text-align: center; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 4px; border-radius: 4px;}
span {font-size:12px; font-family: sans-serif,verdana,geneva; color: rgb(255, 255, 255);}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="1">
<tr>
<th id="showr" scope="col" class="one"><span style="cursor:pointer;">head1</span></th>
<th scope="col" class="two"><span>head2</span></th>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td id="hidr" class="one"><span style="cursor:pointer;">close</span></td>
</tr>
</table>
<script>
$(function()
{
$(".sub-list").hide();
$("#showr").click(function ()
{
$("tr").first().show("fast", function showNext()
{
$(this).next("tr").show("fast", showNext);
});
});

$("#hidr").click(function ()
{
$(".sub-list").hide(1000);
});
});
</script>
</body>
</html>

صورت مسئله هم پاک نشد
موفق باشید
arman1992
چهارشنبه 07 تیر 1391, 19:20 عصر
آقا من خیلی‌ چاکرم. دقیقا چیزی که می‌خواستم. تشکر
arman1992
چهارشنبه 07 تیر 1391, 23:36 عصر
داداش شرمنده یه سوال دیگه هم داشتم. اگر بخوام توی یک صفحه چند تا th و sub-list داشته باشم باید چکار کنم تا تداخل نشه؟ برای مخفی کردن که تغییر دادن sub-list نتیجه میده اما برای باز کردن لیست هیچی به ذهنم نمیرسه. تشکر
blackmak
پنج شنبه 08 تیر 1391, 14:21 عصر
<html>
<head>
<style>
table {width: 860px;}
th.one {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
th.two {width: 10%; text-align: center; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
td.one {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 4px; border-radius: 4px;}
td.two {width: 10%; text-align: center; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 4px; border-radius: 4px;}
.hidr {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
.showr {text-align: left; vertical-align: middle; background-color: rgb(76, 187, 255); -moz-border-radius: 8px; border-radius: 8px;}
span {font-size:12px; font-family: sans-serif,verdana,geneva; color: rgb(255, 255, 255);}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="1">
<tr>
<th class="showr" scope="col" ><span style="cursor:pointer;">head1</span></th>
<th scope="col" class="two"><span>head2</span></th>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="hidr" ><span style="cursor:pointer;">close</span></td>
</tr>
</table>

<table border="0" cellpadding="10" cellspacing="1">
<tr>
<th class="showr" scope="col"><span style="cursor:pointer;">head1</span></th>
<th scope="col" class="two"><span>head2</span></th>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="one"><span>cel</span></td>
<td class="two"><span>cel</span></td>
</tr>
<tr class="sub-list">
<td class="hidr" ><span style="cursor:pointer;">close</span></td>
</tr>
</table>
<script>
$(function()
{
$(".sub-list").hide();
$(".showr").click(function()
{
$(this).parent().first().show("fast", function showNext()
{
$(this).next("tr").show("fast", showNext);
});
});

$(".hidr").click(function()
{
$(this).parent().parent().find('tr.sub-list').hide(500);
});
});
</script>
</body>
</html>

موفق باشید
arman1992
پنج شنبه 08 تیر 1391, 14:39 عصر
آقا من دیگه واقعا نمیدونم چطوری باید تشکر کنم.....