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

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

دیدگاهتان را بنویسید لغو پاسخ

سایر مقالات مرتبط :

ساعات کاری طراحان وب تبریز

تصویر ثابت

اخبار و مطالب آموزشی ما

تماس با مشاورین متخصص