بهم خوردن ترتیب بندی جدول

[olampiad]

سلام و خسته نباشید به دوستان عزیز
من یکی از tr های جدول رو پنهان کردم.
در کدپایین میبینید.




<tr style="display:none;" id="st3">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

حالا میخوام یکی از اون هارو به کمک js فعال کنم.

$('#'+st[count]).css('display','inline-table');

من این کار رو انجام میدم ، اطلاعات نمایش داده میشه ولی ترتیب قرارگیری جدول کلا به هم میخوره.
من برای فعال کردن جدول از چ پارامتری استفاده کنم تا ترتیبش به هم نخوره.
منظورم اینه که display رو چی قرار بدم.
امیدوارم منظورمو متوجه شده باشین.
مرسی

[Omid Jackson]

سلام و خسته نباشید به دوستان عزیز
من یکی از tr های جدول رو پنهان کردم.
در کدپایین میبینید.




<tr style="display:none;" id="st3">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

حالا میخوام یکی از اون هارو به کمک js فعال کنم.

$('#'+st[count]).css('display','inline-table');

من این کار رو انجام میدم ، اطلاعات نمایش داده میشه ولی ترتیب قرارگیری جدول کلا به هم میخوره.
من برای فعال کردن جدول از چ پارامتری استفاده کنم تا ترتیبش به هم نخوره.
منظورم اینه که display رو چی قرار بدم.
امیدوارم منظورمو متوجه شده باشین.
مرسی

کد رو به صورت آنلاین قرار بدین لطفا

[سعید کشاورز]

زمانی که از دستور display: none استفاده میکنی کل عنصر رو از صفحه حذف میکنه..حتی وقتی مخفی میشه جای خودش هم در صفحه از دست میده..و عناصر دیگه جای اون رو پر میکنن
اگه از خاصیت visibility : hidden استفاده کنی عناصر مخفی میشن اما جای خودشون رو صفحه حفظ میکنن..
من سورس شمارو تست نکردم اما فکر کنم مشکلت همین باشه..نمیدونم جوابم درسته یا نه فقط در حد حدس بود

[olampiad]

زمانی که از دستور display: none استفاده میکنی کل عنصر رو از صفحه حذف میکنه..حتی وقتی مخفی میشه جای خودش هم در صفحه از دست میده..و عناصر دیگه جای اون رو پر میکنن
اگه از خاصیت visibility : hidden استفاده کنی عناصر مخفی میشن اما جای خودشون رو صفحه حفظ میکنن..
من سورس شمارو تست نکردم اما فکر کنم مشکلت همین باشه..نمیدونم جوابم درسته یا نه فقط در حد حدس بود

سلام و خسته نباشید.
من کاری که شما گفتین رو انجام دادم.
به خوبی جواب داد.
ولی یه مشکلی دارم:
وقتی من display رو hidden قرار میدادم هیچ اثری از tr ها باقی نمیموند.
یعنی اونا علاوه بر اینکه تو صفحه نشون داده نمی شن جایی هم تو صفحه نمیگیرن.(منظورم اینه که از لحاظ ظاهری معلوم نیست که عنصری تو صفحه بوده)
ولی
وقتی از خصوصیت visibility استفاده میکنم.
درسته که نشون داده نمشه ولی جایی رو اشکال میکنه.(منظورم اینه که جای tr پنهان شده تو صفحه خالی میمونه )
من میخوام وقتی که نشون داده نمشه:جاش هم خالی باشه.
امیدوارم منظورمو متوجه شده باشین
مرسی

[olampiad]

سلام
من کد هارو اینجا قرار میدم تا خودتون یه نگا بندازین.
مرسی




<table id="tab">
<caption style="background:#FFF;"> <a href="" id="tk" style="background:#9d0250; padding:2px; padding-right:7px; color:#FFF; border-radius:3px; padding-left:7px; text-decoration:none; font-size:15px;"> جدید </a> </caption>

<tr>
<td> عنوان کتاب </td>
<td> نوع </td>
<td> ناشر </td>
<td> سال انتشار </td>
<td> توضیحات </td>
<td> وضعیت چاپ </td>
</tr>


<tr>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>


<tr style="display:none;" id="tk1">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

<tr style="display:none;" id="tk2">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

<tr style="display:none;" id="tk3">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>


<tr style="display:none;" id="tk4">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>


<tr style="display:none;" id="tk5">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

<tr style="display:none;" id="tk6">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

<tr style="display:none;" id="tk7">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

<tr style="display:none;" id="tk8">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>


<tr style="display:none;" id="tk9">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>

<tr style="display:none;" id="tk10">
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
<td> <input type="text" class="inp"> </td>
</tr>




var tk=0;
var tk_arr=new Array('tk1','tk2','tk3','tk4','tk5','tk7','tk8','t k9','tk10');
$('#tk').click(function(){
$('#'+tk_arr[tk]).css('display','block');
tk++;
return false;
})

[Omid Jackson]

شما میخواین یه سطر که پنهان هست رو نمایش بدین، کافیه بگین وقتی کلیک شد، display: table-row بشه
نمونه آنلاین (http://jsfiddle.net/Blend_Design/kj0tzjo8/) هم براتون گذاشتم، فقط کد هاتون مشکل زیاد داره