لینک کردن یک ردیف TR جدول در HTML

    سایز فونت کم کردن سایز فونت افزایش سایز فونت برای نظر دهی اولین باشید

    1
    2
    3
    4
    5

رتبه ۵ در ۱ رای از ۱ تا ۵

در این مقاله به شما روش لینک نمودن یک ردیف کامل از جدول TABLE در اچ تی ام ال را آموزش خواهم داد. روش های متفاوتی برای انجام این کار وجود دارد اما روش زیر راحترین روش انجام این کار می باشد که با استفاده از JQUERY انجام می گردد. برای این کار کافی است کتابخانه Jquery را در صفحه html خود اضافه نمایید. پس از اضافه نمودن این کتابخانه قابلیت استفاده از دستورها و توابع آن را دارید. فرض نمایید کد ردیف هر جدول شما چیزی باشد شبیه به کد زیر:
 <tr>
<td><a href="http://www.example.com/">example</a></td>
<td>another cell</td>
<td>one more</td>
</tr>

برای آنکه کل ردیف را لینک نمایید کافی است آدرس لینکی که در TR وجود دارد را بدست بیاورید و به عنوان لینک TR قرار دهید. برای انجام این کار می توانید از دستور jquery زیر استفاده نمایید:
 $('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});

در دستور بالا می توانید کلاس جدولی که قصد دارید ردیف های آن لینک گردند اضافه نمایید.

برای آنکه علامت موس به حالت دست باشد تا کاربر متوجه لینکی بودن کل ردیف شود می توانید کد CSS زیر را به فایل خود اضافه نمایید:
 tr.hover {
cursor: pointer;
}

البته لینک کردن TR را می توانید به روش های دیگری نیز انجام دهید که در صورت تمایل می توانید سایر روش ها را در بخش نظرات اعلام نمایید.
نویسنده این مقاله Ahmad Balavipour می باشد که از سال ۱۳۸۱ تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام ، گوگل پلاس و لینکدین.
به اشتراک گذاری مطلب در
به اشتراک گذاری در فیس بوک به اشتراک گذاری در گوگل پلاس به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین
فعال سازی شده در jquery در طراحی سایت
آیتم های گفته شده(توسط تگ)

بیشتر در این دسته بندی: « ساخت اسکرول بینهایت توسط jquery و تابع load جهش به فیلد بعدی فرم به محض رسیدن به حداکثر ظرفیت »
یک نظر بدهید

موارد ستاره دار الزامی هستند
پیام *
پیام خود را در اینجا وارد کنید…
نام *
ایمیل *
آدرس وب سایت
دو کلمه برای مشاهده در زیر وارد کنید
reCAPTCHA challenge image
    Get a new challenge Get an audio challenge Help     
    Privacy & Terms
بازگشت به بالا