البرمجة

تحديث أرقام الصفوف في جدول HTML باستخدام jQuery

12/03/2024
5 دقيقة واحدة

To achieve this using jQuery, you can add a class to the table rows (

) to identify them easily, and then use jQuery to update the row numbers in the remove() function. Here’s how you can do it:

html
html>
<html>
<head>
    <title>jQuery Remove Table Rowtitle>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    <script>
        $(document).ready(function () {
            $('.remove-link').on('click', function () {
                var row = $(this).closest('tr');
                var rowNumber = row.index();
                row.remove();

                // Update row numbers
                $('tbody tr').each(function (index) {
                    $(this).find('td:first').text(index + 1);
                });
            });
        });
    script>
head>
<body>
    <table>
        <thead>
            <tr>
                <th>IDth>
                <th>Linkth>
            tr>
        thead>
        <tfoot>
            <tr>
                <th>IDth>
                <th>Linkth>
            tr>
        tfoot>
        <tbody>
            <tr>
                <td>1td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>2td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>3td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>4td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>5td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>6td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
        tbody>
    table>
body>
html>

In this code, each row has a “Remove” link with the class remove-link. When you click on the link, the row is removed from the table, and then the row numbers in the first column are updated for the remaining rows using the each() function.

المزيد من المعلومات

لتحقيق هذا باستخدام jQuery، يمكنك إضافة فئة إلى صفوف الجدول (

) لتحديدها بسهولة، ثم استخدام jQuery لتحديث أرقام الصفوف في دالة remove() . إليك كيف يمكنك القيام بذلك:

html
html>
<html>
<head>
    <title>jQuery Remove Table Rowtitle>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    <script>
        $(document).ready(function () {
            $('.remove-link').on('click', function () {
                var row = $(this).closest('tr');
                var rowNumber = row.index();
                row.remove();

                // Update row numbers
                $('tbody tr').each(function (index) {
                    $(this).find('td:first').text(index + 1);
                });
            });
        });
    script>
head>
<body>
    <table>
        <thead>
            <tr>
                <th>IDth>
                <th>Linkth>
            tr>
        thead>
        <tfoot>
            <tr>
                <th>IDth>
                <th>Linkth>
            tr>
        tfoot>
        <tbody>
            <tr>
                <td>1td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>2td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>3td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>4td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>5td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
            <tr>
                <td>6td>
                <td><a href="#" class="remove-link">Removea>td>
            tr>
        tbody>
    table>
body>
html>

في هذا الكود، لكل صف هناك رابط “إزالة” بالفئة remove-link. عند النقر فوق الرابط، يتم إزالة الصف من الجدول، ثم يتم تحديث أرقام الصفوف في العمود الأول للصفوف المتبقية باستخدام دالة each().

الوسوم
12/03/2024
5 دقيقة واحدة
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى