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

رتبه این آیتم
لینک کردن یک ردیف TR جدول در HTML
رتبه 5 در 1 رای از 1 تا 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 را می توانید به روش های دیگری نیز انجام دهید که در صورت تمایل می توانید سایر روش ها را در بخش نظرات اعلام نمایید.


نویسنده این مقاله می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام و لینکدین.

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

يک نظر بدهيد

موارد ستاره دار الزامی هستند

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد