How to modify the table with jquery

In recent years, with the rapid development of Web technology, jQuery has become one of the most popular JavaScript libraries in front-end development. It can help us manage HTML documents, operate DOM elements, event handling, etc. more easily.

In the web development process, tables are an important way to display data. However, sometimes, we need to modify and edit the form. jQuery provides us with powerful functions that can help us modify tables easily. Next we will explain how to modify the table with jquery.

1. Dynamically add table rows

Normally, there will be some table rows in our page that need to be added or deleted in real time. For example, in a shopping cart list on a shopping website, users can add or delete items in the shopping cart. At this point, it would be very time-consuming and cumbersome to manually add and delete table rows every time. jQuery provides us with methods such as "append()", "prepend()", "after()" and "before()", which can easily add and delete table rows dynamically.

For example, if we want to add a row to the table, we can use the following code:

$("table").append("<tr><td>新行数据 1</td><td>新行数据 2</td></tr>");

After executing the above code, a row will be added to the last row of the table. The content of this row is "New row Data1" and "Newline Data2".

2. Dynamic operation of table data

Sometimes, we need to modify the data of an existing table, for example, the data of a certain column in the table needs to be updated. jQuery provides the "text()" and "html()" methods to easily modify table data.

For example, if we want to modify the data in the second column of the table, we can use the following code:

$("table tr td:nth-child(2)").text("新的数据");

The above code will update all the data in the second column of the table to "new data ".

3. Implement table sorting function

If there is a table with a lot of data, a table sorting function will usually be provided so that users can easily view and compare data. Here we can use the "sortable" method in the jQuery UI library to implement the table sorting function very simply.

For example, we have the following table:

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

We can sort the table through the following code:

$(function(){
    $("table tbody").sortable({
        placeholder : "ui-state-highlight"
    });
});

Among them, the "sortable()" function will be in the table Add a draggable function and automatically sort the dragged rows, where "placeholder" is a placeholder. When a row is dragged, the occupied position will be temporarily occupied by this placeholder.

After the above code is executed, the rows in the table can be dragged freely to realize the sorting function of the table.

4. Real-time search for table data

In some tables with large amounts of data, we can provide a search function to enable users to quickly locate the data they need to find. Here we can use jQuery's "filter" method to achieve real-time search of table data.

For example, we have the following table:

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>25</td>
            <td>女</td>
        </tr>
        <tr>
            <td>小刚</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

We can use the following code to realize real-time search of table data:

$(function(){
    $("#search_input").keyup(function(){
        var keyword = $(this).val();
        $("table tbody tr").hide().filter(":contains('"+ keyword +"')").show();
    });
});

In the above code, the "keyup()" method Changes in the search box input box are monitored and triggered when the keyboard is pressed. Next, get the keywords in the input box, filter the matching lines through "filter()", and finally display the search results through "show()".

Through the above methods, we can easily modify, sort, search and other operations on the table to improve the user experience of the page.

The above is the detailed content of How to modify the table with jquery. For more information, please follow other related articles on the PHP Chinese website!