<html>

<head>
    <title>دکتر کد - مرجع آموزش هایی به سبک متفاوت</title>
<style>
    .custom_table{
        border-collapse: collapse;
        direction: rtl;
        text-align: right;
    }
    .custom_table tr:nth-child(odd){
        background-color: #f2f2f2;
    }
    .custom_table td, .custom_table th{
        border: 1px solid #e5e5e5;
        padding: 5px;
    }
    .custom_table th{
        background: #CC8E35;
        color: #fff;
    }
    .custom_table td.delete:hover{
        background:#C0392B;
        color: #fff;
        cursor: pointer;
    }
</style>
</head>

<body>

<table class="custom_table">
    <tr>
        <th>ردیف</th>
        <th>عنوان</th>
        <th>نوشته</th>
        <th>ابزار</th>
    </tr>
    <tr>
        <td>1</td>
        <td>HTML</td>
        <td>آموزش ایجاد جدول با استفاده از HTML</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>2</td>
        <td>CSS</td>
        <td>اعمال استایل به جدول ها</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>3</td>
        <td>JQuery</td>
        <td>حذف ردیف مورد نظر از یک جدول</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>4</td>
        <td>JavaScript</td>
        <td>اصول برنامه نویسی کاربردی</td>
        <td class="delete">× حذف</td>
    </tr>
</table>
<hr>
<table border="1">
    <tr>
        <th>ردیف</th>
        <th>عنوان</th>
        <th>نوشته</th>
        <th>ابزار</th>
    </tr>
    <tr>
        <td>1</td>
        <td>HTML</td>
        <td>آموزش ایجاد جدول با استفاده از HTML</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>2</td>
        <td>CSS</td>
        <td>اعمال استایل به جدول ها</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>3</td>
        <td>JQuery</td>
        <td>حذف ردیف مورد نظر از یک جدول</td>
        <td class="delete">× حذف</td>
    </tr>
    <tr>
        <td>4</td>
        <td>JavaScript</td>
        <td>اصول برنامه نویسی کاربردی</td>
        <td class="delete">× حذف</td>
    </tr>
</table>

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.delete').on('click', function(){
            $(this).parent('tr').remove();
        });
    })
</script>

</body>

</html>
دکتر کد - مرجع آموزش هایی به سبک متفاوت
ردیف عنوان نوشته ابزار
1 HTML آموزش ایجاد جدول با استفاده از HTML × حذف
2 CSS اعمال استایل به جدول ها × حذف
3 JQuery حذف ردیف مورد نظر از یک جدول × حذف
4 JavaScript اصول برنامه نویسی کاربردی × حذف

ردیف عنوان نوشته ابزار
1 HTML آموزش ایجاد جدول با استفاده از HTML × حذف
2 CSS اعمال استایل به جدول ها × حذف
3 JQuery حذف ردیف مورد نظر از یک جدول × حذف
4 JavaScript اصول برنامه نویسی کاربردی × حذف