۱ مطلب با کلمه‌ی کلیدی «how to select odd row with jquery» ثبت شده است

طراحی یک جدول HTML

بسم الله الرحمن الرحیم

طبیعتا همه با طراحی یک جدول ساده HTML آشنایی دارید، مثلا جدول زیر را در نظر بگیرید:

<table >
        <tr>
            <th >
            Title
            </th>
       
            <th >
            Price
            </th>
        </tr>
         <tr>
            <td >
            CSS
            </td>
       
            <td >
            1,000,000
            </td>
        </tr>
         <tr>
            <td >
            HTML
            </td>
       
            <td >
            12,000,000 
            </td>
        </tr>
</table>

خوب حالا فکر کنید می خواهید به سطرهای جدولتان استایلی بدهید، در زمان های گذشته شما می بایست یک استایل تعریف می کردید مثلا

<style>
.blueColor
{
    color:blue;
}
</style>

بعد آن را به سلول های جدول خود یعنی td می دادید.

اما باز طبیعتا شما نیز از Selector های HTML استفاده می کنید مثل زیر

<html>
<head>
<style>
tr
{
    color:blue;
}
</style>

</head>
<body>
<table >
        <tr>
            <th >
            Title
            </th>
       
            <th >
            Price
            </th>
        </tr>
         <tr>
            <td >
            CSS
            </td>
       
            <td >
            1,000,000
            </td>
        </tr>
         <tr>
            <td >
            HTML
            </td>
       
            <td >
            12,000,000 
            </td>
        </tr>
</table>
</body>

خوب اگر بخواهید برای سطر و ستون های زوج فرد استایل تعریف کنید یک راه این است که به صورت گذشته آن را به سلول ها بدهید.

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

وقتی دارید به صورت داینامیک جدول ایجاد می کنید و یا سطر و ستون های شما به صورت داینامیک از پایگاه داده شما خوانده و ایجاد می شوند، این دستور می تواند بسیار به شما کمک کند.

$(document).ready(function(){
  $("tr:odd").css("background-color","yellow");
});
</script>

حال مثال ما به صورت زیر کامل می شود

<html>
<head>
<style>
.oddStyle
{
    color:blue;
}
.evenStyle
{
    color: red;
}
</style>
<script>
    $(document).ready(function () {
        $("tr:even").addClass("even");
         $("tr:odd").addClass("oddStyle");
    });
</script>
</head>
<body>
<table >
        <tr>
            <th >
            Title
            </th>
       
            <th >
            Price
            </th>
        </tr>
         <tr>
            <td >
            CSS
            </td>
       
            <td >
            1,000,000
            </td>
        </tr>
         <tr>
            <td >
            HTML
            </td>
       
            <td >
            12,000,000 
            </td>
        </tr>
</table>
</body>

شاید راه های ساده به نظر پیش پا افتاده و مبتدی باشند اما رفع یک نیاز می تواند اختراع یک دکمه باشد، سعی کنید این مطالب کوچک و پیش پا افتاده را برای افزایش سرعت کد نویسی و حل مسائل همیشه دنبال کنید

موفق باشید

آموزش برنامه نویسی

۱ مطلب با کلمه‌ی کلیدی «how to select odd row with jquery» ثبت شده است